projectdx/anime_downloader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

anime-downloader bug fix 15.

Browse Source 
lazy image loader
This commit is contained in:
projectdx
2022-04-07 16:06:36 +09:00
parent 889c0177a8
commit 4d0e55b25f
1 changed files with 173 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
templates/anime_downloader_ohli24_category.html
View File

@@ -33,13 +33,20 @@
</form>
</div> <!--전체-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script type="text/javascript">
const package_name = "{{arg['package_name'] }}";
const sub = "{{arg['sub'] }}";
const ohli24_url = "{{arg['ohli24_url']}}";
let current_data = null;
const observer = lozad('.lozad', {
rootMargin: '10px 0px', // syntax similar to that of CSS Margin
threshold: 0.1, // ratio of element convergence
enableAutoReload: true // it will reload the new image when validating attributes changes
});
observer.observe();
const get_anime_list = (type, page) => {
console.log(`type: ${type}, page: ${page}`)
@@ -73,6 +80,9 @@
if (current_screen_movie_data !== '') {
if (type === "ing") {
make_airing_list(ret.data, page)
setTimeout(() => {
observer.observe();
}, 2000);
} else {
make_screen_movie_list(ret, page)
}
@@ -84,17 +94,16 @@
})
}
function make_airing_list(data, page) {
let str = ''
let tmp = ''
{#str += "<d"#}
{#str += m_hr_black();#}
{#str += m_row_start(0);#}
{##}
{#str += m_row_end();#}
{#str += m_hr_black();#}
// {#str += "<d"#}
// {#str += m_hr_black();#}
// {#str += m_row_start(0);#}
// {##}
// {#str += m_row_end();#}
// {#str += m_hr_black();#}
str += '<div>';
str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>';
str += '</div>';
@@ -103,7 +112,7 @@
tmp = '<div class="col-sm-4">';
tmp += '<div class="card">';
tmp += '<img class="card-img-top" src="' + data.anime_list[i].image_link + '" />';
tmp += '<img class="lozad" data-src="' + data.anime_list[i].image_link + '" />';
tmp += '<div class="card-body">'
{#tmp += '<button id="code_button" data-code="' + data.episode[i].code + '" type="button" class="btn btn-primary code-button bootstrap-tooltip" data-toggle="button" data-tooltip="true" aria-pressed="true" autocomplete="off" data-placement="top">' +#}
{# '<span data-tooltip-text="'+data.episode[i].title+'">' + data.episode[i].code + '</span></button></div>';#}
@@ -140,12 +149,12 @@
let str = ''
let tmp = ''
{#str += "<d"#}
{#str += m_hr_black();#}
{#str += m_row_start(0);#}
{##}
{#str += m_row_end();#}
{#str += m_hr_black();#}
// {#str += "<d"#}
// {#str += m_hr_black();#}
// {#str += m_row_start(0);#}
// {##}
// {#str += m_row_end();#}
// {#str += m_hr_black();#}
str += '<div>';
str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>';
str += '</div>';
@@ -189,21 +198,24 @@
$(document).ready(function(){
{#if ( "{{arg['ohli24_current_code']}}" !== "" ) {#}
{# document.getElementById("code").value = "{{arg['ohli24_current_code']}}";#}
{# // 값이 공백이 아니면 분석 버튼 계속 누름#}
{#document.getElementById("analysis_btn").click();#}
{#}#}
// if ( "{{arg['ohli24_current_code']}}" !== "" ) {
// document.getElementById("code").value = "{{arg['ohli24_current_code']}}";
// // 값이 공백이 아니면 분석 버튼 계속 누름
// document.getElementById("analysis_btn").click();
// }
$('#anime_category #ing').on("click", function() {
{#console.log(this.id)#}
// {#console.log(this.id)#}
let spinner = document.getElementById('spinner');
spinner.style.visibility = 'visible';
get_anime_list("ing", 1)
})
// 분석 버튼 클릭시 호출
$("body").on('click', '#analysis_btn', function(e){
$("body").on('click', '#analysis_btn', function(e) {
e.preventDefault();
const code = document.getElementById("code").value
console.log(code)
@@ -211,11 +223,11 @@
url: '/' + package_name + '/ajax/' + sub + '/analysis',
type: "POST",
cache: false,
data: {code:code},
data: {code: code},
dataType: "json",
success: function (ret) {
if (ret.ret === 'success' && ret.data != null) {
{#console.log(ret.code)#}
// console.log(ret.code)
console.log(ret.data)
make_program(ret.data)
} else {
@@ -223,7 +235,7 @@
}
}
});
});
$("body").on('click', '#go_ohli24_btn', function(e){
@@ -263,9 +275,130 @@
}
}
});
});
});
});
// const observer = lozad();
const observer = lozad('.lozad', {
rootMargin: '10px 0px', // syntax similar to that of CSS Margin
threshold: 0.1, // ratio of element convergence
enableAutoReload: true // it will reload the new image when validating attributes changes
});
observer.observe();
});
// const el = document.querySelector('img');
// const observer = lozad(el); // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
// observer.observe();
</script>
<style>
button.code-button { min-width: 82px!important;}
.tooltip {
position: relative;
display: block;
}
[data-tooltip-text]:hover {
position: relative;
}
[data-tooltip-text]:after {
-webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
-moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
background-color: rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #FFFFFF;
font-size: 12px;
margin-bottom: 10px;
padding: 7px 12px;
position: absolute;
width: auto;
min-width: 50px;
max-width: 300px;
word-wrap: break-word;
z-index: 9999;
opacity: 0;
left: -9999px;
top: 90%;
content: attr(data-tooltip-text);
}
[data-tooltip-text]:hover:after {
top: 230%;
left: 0;
opacity: 1;
}[data-tooltip-text]:hover {
position: relative;
}
[data-tooltip-text]:after {
-webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
-moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
background-color: rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #FFFFFF;
font-size: 12px;
margin-bottom: 10px;
padding: 7px 12px;
position: absolute;
width: auto;
min-width: 50px;
max-width: 300px;
word-wrap: break-word;
z-index: 9999;
opacity: 0;
left: -9999px;
top: -210%!important;
content: attr(data-tooltip-text);
}
[data-tooltip-text]:hover:after {
top: 130%;
left: 0;
opacity: 1;
}
#airing_list {
display: none;
}
.cut-text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
#screen_movie_list {
margin-top: 10px
}
</style>
{% endblock %}