From 4d0e55b25f477bbfc778663b890161d73a6063ee Mon Sep 17 00:00:00 2001
From: projectdx <com114@gmail.com>
Date: Thu, 7 Apr 2022 16:06:36 +0900
Subject: [PATCH] anime-downloader bug fix 15. lazy image loader

---
 .../anime_downloader_ohli24_category.html     | 213 ++++++++++++++----
 1 file changed, 173 insertions(+), 40 deletions(-)

diff --git a/templates/anime_downloader_ohli24_category.html b/templates/anime_downloader_ohli24_category.html
index 69f2a48..fe727a6 100644
--- a/templates/anime_downloader_ohli24_category.html
+++ b/templates/anime_downloader_ohli24_category.html
@@ -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,43 +198,46 @@
 
 
     $(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)
-    $.ajax({
-        url: '/' + package_name + '/ajax/' + sub + '/analysis',
-        type: "POST",
-        cache: false,
-        data: {code:code},
-        dataType: "json",
-        success: function (ret) {
-           if (ret.ret === 'success' && ret.data != null) {
-               {#console.log(ret.code)#}
-               console.log(ret.data)
-               make_program(ret.data)
-           } else {
-               $.notify('<strong>분석 실패</strong><br>' + ret.log, {type: 'warning'});
-           }
-        }
+        $.ajax({
+            url: '/' + package_name + '/ajax/' + sub + '/analysis',
+            type: "POST",
+            cache: false,
+            data: {code: code},
+            dataType: "json",
+            success: function (ret) {
+                if (ret.ret === 'success' && ret.data != null) {
+                    // console.log(ret.code)
+                    console.log(ret.data)
+                    make_program(ret.data)
+                } else {
+                    $.notify('<strong>분석 실패</strong><br>' + ret.log, {type: 'warning'});
+                }
+            }
+        });
     });
 
 
-
     $("body").on('click', '#go_ohli24_btn', function(e){
         e.preventDefault();
         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>
+    <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 %}
\ No newline at end of file