京东商城延迟加载
圖片延遲加載練習
1、javascript實現圖片延遲加載方法匯總(三種方法)（轉）
?
?https://www.cnblogs.com/huangshikun/p/6640862.html
2、知識點應用：
?1.瀏覽器尺寸獲取：
- 可視區(qū)高度：document.documentElement.clientHeight
- 滾動條的距離： window.pageYOffset（只讀）
- 元素上邊到視窗上邊的距離： object.getBoundingClientRect( ).top
- 設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離：offsetTop
- 獲取元素屬性：img1.getAttribute（'src'）
- 刪除元素： img.removeAttribute（'_src'）
2.html中offsetTop、clientTop、scrollTop、offsetTop各屬性介紹（轉）：?https://blog.csdn.net/u013795673/article/details/52171411
3.onload事件：
4.onscroll：`延時加載和，定時器一起用會出現bug`
5.onerror： 事件會在文檔或圖像加載過程中發(fā)生錯誤時被觸發(fā)
3、思路整理：
1.可視區(qū)的大小 document.documentElement.clientHeight；
2.獲取每一張照片的位置 絕對位置 到頂部的距離 li.offsetTop img[i] mytools.offset(img[i]).top?object.getBoundingClientRect( ).top：元素上邊到視窗上邊的距離;
3.clientHeight pageYOffset offsetTop?可視區(qū)的大小 + 滾動條的距離 >= 每一張的絕對位置?document.documentElement.clientHeight + window.pageYOffset >=li[i].offsetTop
4.把所有需要延時加載的圖片改成如下的格式：1、`<img lazy_src="圖片路徑" border="0"/>`?然后在頁面加載時，把所有使用了lazy_src的圖片都保存到數組里，然后在滾動時計算可視區(qū)域的top，然后把延時加載的圖片中top小于當前可視區(qū)域（即圖片出現在可視區(qū)域內）的圖片的src的值用lazy_src的來替換（加載圖片）：
4、編程過程：
1.結構中,把所有需要延時加載的圖片改成如下的格式：<img lazy_src="圖片路徑" border="0"/>
2.得到每一個li給li添加判斷（比圖片小paddingtop=10px） (如果可視區(qū)的大小 + 滾動條的距離 <=每一張的絕對位置 ) 改格式
3.forEach循環(huán)檢查標記，有標記進行操作；
4.給瀏覽器緩存一張照片，觸發(fā)照片的onload事件，將緩存照片地址賦給頁面中的img；
5.使用定時器進行刪除標記；
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <link rel="stylesheet" href="css/reset.min.css"> 8 <link rel="stylesheet" href="css/index.css"> 9 <style> 10 #list img { 11 opacity: 0; 12 transition: 1s; 13 } 14 </style> 15 </head> 16 17 <body> 18 <div class="content"> 19 <div class="header"> 20 <span>排序</span> 21 <a href="javascript:;" kk="time">上架時間 22 <i class="up"></i> 23 <i class="down"></i> 24 </a> 25 <a href="javascript:;" kk="hot">熱度 26 <i class="up"></i> 27 <i class="down"></i> 28 </a> 29 <a href="javascript:;" kk="price">價格 30 <i class="up"></i> 31 <i class="down"></i> 32 </a> 33 </div> 34 <ul id="list"> 35 <!-- <li> 36 <img src="img/1.jpg" alt=""> 37 <span>華為暢享7（香檳金）</span> 38 <span>2018-01-01</span> 39 <span>1</span> 40 <span>992</span> 41 </li> --> 42 </ul> 43 </div> 44 45 <script src="json/product.js"></script> 46 <script src="../mytools.js"></script> 47 </body> 48 49 </html> 1 <script> 2 data.push(...data); //40 3 4 function render(data) { 5 let html = ''; 6 data.forEach((e, i) => { 7 html += 8 ` 9 <li> 10 <img width="205" height="205" _src="${e.img}" alt=""> 11 <span>${e.title}</span> 12 <span>${e.time}</span> 13 <span>${e.hot}</span> 14 <span>${e.price}</span> 15 </li> 16 `; 17 }); 18 list.innerHTML = html; 19 } 20 render(data); 21 22 // console.log(mytools.offset(list).top) 23 24 /* 25 思路整理： 26 1.可視區(qū)的大小 document.documentElement.clientHeight； 27 28 2.獲取每一張照片的位置 絕對位置 到頂部的距離 li.offsetTop img[i] mytools.offset(img[i]).top 29 30 object.getBoundingClientRect( ).top：元素上邊到視窗上邊的距離; 31 32 3.clientHeight pageYOffset offsetTop 33 可視區(qū)的大小 + 滾動條的距離 >= 每一張的絕對位置 34 document.documentElement.clientHeight + window.pageYOffset >=li[i].offsetTop 35 36 4.把所有需要延時加載的圖片改成如下的格式：1、<img lazy_src="圖片路徑" border="0"/> 37 38 然后在頁面加載時，保存到img1 = new Image中，然后在滾動時計算可視區(qū)域的top，然后把延時加載的圖片中top小于當前可視區(qū)域（即圖片出現在可視區(qū)域內）的圖片的src的值用 img1 = new Image 的來替換（加載圖片）： 39 40 */ 41 42 let client_height = document.documentElement.clientHeight; 43 let li_list = Array.from(list.querySelectorAll('li')) 44 lazy_load() //先調用onscroll中的函數讓其運行一次，可視區(qū)域內有內容 45 onscroll = lazy_load; //滾動事件添加給函數；（onscroll 事件在元素滾動條在滾動時觸發(fā)。） 46 function lazy_load() { 47 //結構中,把所有需要延時加載的圖片改成如下的格式：1、<img lazy_src="圖片路徑" border="0"/> 48 //得到每一個li給li添加判斷(比圖片小paddingtop=10px) ， (如果可視區(qū)的大小 + 滾動條的距離 <=每一張的絕對位置 ) 改格式 49 //forEach循環(huán)檢查標記，有標記進行操作； 50 //給瀏覽器緩存一張照片，觸發(fā)照片的onload事件，將緩存照片地址賦給頁面中的img； 51 //使用定時器進行刪除標記； 52 li_list.forEach(el => { 53 /*el.offsetTop+paddingtop =mytools.offset(el.querySelector('img')).top*/ 54 //*進行改格式操作* 55 if (el.offsetTop <= (document.documentElement.clientHeight + window.pageYOffset)) { 56 let img = el.querySelector('img');//獲取元素 57 if (img.getAttribute('_src')) {//檢查標記 58 //***給瀏覽器緩存一張照片，觸發(fā)照片的onload事件，將緩存照片地址賦給頁面中的img*** 59 let img1 = new Image; //創(chuàng)建對象 new Image() 60 img1.src =img.getAttribute('_src'); //這樣做就相當于給瀏覽器緩存了一張圖片。 61 //如果圖片加載成功就會進入onload事件，加載完成后執(zhí)行； 62 img1.onload = function () { 63 img.src = img1.getAttribute('src') //調用加載的圖片，解決部分未加載bug。 64 // img.src=img.getAttribute('_src')//調用已經加載的圖片，進行src修改，別調用未加載過得圖片(_src) 65 setTimeout(function () { 66 //每次賦值之后都刪除_src，以便下次就不去匹配了 67 //加定時器的目的就是為了先賦值后刪除 68 img.removeAttribute('_src'); 69 }, 50); 70 } 71 img1.onerror = function () { 72 img.src = 'img/timg.jpg'; //給張默認圖片 73 setTimeout(function () { 74 img.removeAttribute('_src'); 75 }, 50); 76 } 77 img.style.opacity = 1 }}})} 78 </script>?
?
轉載于:https://www.cnblogs.com/zijie-li/p/9847024.html
總結
- 上一篇： 5G的落地现状与未来变局
- 下一篇： java中undefined如何解决_j