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

213
templates/anime_downloader_ohli24_category.html
View File

@@ -33,13 +33,20 @@
</form> </form>
</div> <!--전체--> </div> <!--전체-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
const package_name = "{{arg['package_name'] }}"; const package_name = "{{arg['package_name'] }}";
const sub = "{{arg['sub'] }}"; const sub = "{{arg['sub'] }}";
const ohli24_url = "{{arg['ohli24_url']}}"; const ohli24_url = "{{arg['ohli24_url']}}";
let current_data = null; 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) => { const get_anime_list = (type, page) => {
console.log(`type: ${type}, page: ${page}`) console.log(`type: ${type}, page: ${page}`)
@@ -73,6 +80,9 @@
if (current_screen_movie_data !== '') { if (current_screen_movie_data !== '') {
if (type === "ing") { if (type === "ing") {
make_airing_list(ret.data, page) make_airing_list(ret.data, page)
setTimeout(() => {
observer.observe();
}, 2000);
} else { } else {
make_screen_movie_list(ret, page) make_screen_movie_list(ret, page)
} }
@@ -84,17 +94,16 @@
}) })
} }
function make_airing_list(data, page) { function make_airing_list(data, page) {
let str = '' let str = ''
let tmp = '' let tmp = ''
{#str += "<d"#} // {#str += "<d"#}
{#str += m_hr_black();#} // {#str += m_hr_black();#}
{#str += m_row_start(0);#} // {#str += m_row_start(0);#}
{##} // {##}
{#str += m_row_end();#} // {#str += m_row_end();#}
{#str += m_hr_black();#} // {#str += m_hr_black();#}
str += '<div>'; str += '<div>';
str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>'; str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>';
str += '</div>'; str += '</div>';
@@ -103,7 +112,7 @@
tmp = '<div class="col-sm-4">'; tmp = '<div class="col-sm-4">';
tmp += '<div class="card">'; 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 += '<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">' +#} {#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>';#} {# '<span data-tooltip-text="'+data.episode[i].title+'">' + data.episode[i].code + '</span></button></div>';#}
@@ -140,12 +149,12 @@
let str = '' let str = ''
let tmp = '' let tmp = ''
{#str += "<d"#} // {#str += "<d"#}
{#str += m_hr_black();#} // {#str += m_hr_black();#}
{#str += m_row_start(0);#} // {#str += m_row_start(0);#}
{##} // {##}
{#str += m_row_end();#} // {#str += m_row_end();#}
{#str += m_hr_black();#} // {#str += m_hr_black();#}
str += '<div>'; str += '<div>';
str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>'; str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>';
str += '</div>'; str += '</div>';
@@ -189,43 +198,46 @@
$(document).ready(function(){ $(document).ready(function(){
{#if ( "{{arg['ohli24_current_code']}}" !== "" ) {#}
{# document.getElementById("code").value = "{{arg['ohli24_current_code']}}";#} // if ( "{{arg['ohli24_current_code']}}" !== "" ) {
{# // 값이 공백이 아니면 분석 버튼 계속 누름#} // document.getElementById("code").value = "{{arg['ohli24_current_code']}}";
{#document.getElementById("analysis_btn").click();#} // // 값이 공백이 아니면 분석 버튼 계속 누름
{#}#} // document.getElementById("analysis_btn").click();
// }
$('#anime_category #ing').on("click", function() { $('#anime_category #ing').on("click", function() {
{#console.log(this.id)#} // {#console.log(this.id)#}
let spinner = document.getElementById('spinner'); let spinner = document.getElementById('spinner');
spinner.style.visibility = 'visible'; spinner.style.visibility = 'visible';
get_anime_list("ing", 1) get_anime_list("ing", 1)
}) })
// 분석 버튼 클릭시 호출 // 분석 버튼 클릭시 호출
$("body").on('click', '#analysis_btn', function(e){ $("body").on('click', '#analysis_btn', function(e) {
e.preventDefault(); e.preventDefault();
const code = document.getElementById("code").value const code = document.getElementById("code").value
console.log(code) console.log(code)
$.ajax({ $.ajax({
url: '/' + package_name + '/ajax/' + sub + '/analysis', url: '/' + package_name + '/ajax/' + sub + '/analysis',
type: "POST", type: "POST",
cache: false, cache: false,
data: {code:code}, data: {code: code},
dataType: "json", dataType: "json",
success: function (ret) { success: function (ret) {
if (ret.ret === 'success' && ret.data != null) { if (ret.ret === 'success' && ret.data != null) {
{#console.log(ret.code)#} // console.log(ret.code)
console.log(ret.data) console.log(ret.data)
make_program(ret.data) make_program(ret.data)
} else { } else {
$.notify('<strong>분석 실패</strong><br>' + ret.log, {type: 'warning'}); $.notify('<strong>분석 실패</strong><br>' + ret.log, {type: 'warning'});
} }
} }
});
}); });
$("body").on('click', '#go_ohli24_btn', function(e){ $("body").on('click', '#go_ohli24_btn', function(e){
e.preventDefault(); e.preventDefault();
window.open("{{arg['ohli24_url']}}", "_blank"); window.open("{{arg['ohli24_url']}}", "_blank");
@@ -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> </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 %} {% endblock %}