京東商城延遲加載

時間 2019-11-30

標籤京東商城延遲加載简体版

原文原文鏈接

圖片延遲加載練習

一、javascript實現圖片延遲加載方法彙總(三種方法)（轉）

https://www.cnblogs.com/huangshikun/p/6640862.html

二、知識點應用：

1.瀏覽器尺寸獲取：javascript

- 可視區高度：document.documentElement.clientHeightcss

- 滾動條的距離： window.pageYOffset（只讀）html

- 元素上邊到視窗上邊的距離： object.getBoundingClientRect( ).topjava

- 設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離：offsetTop編程

- 獲取元素屬性：img1.getAttribute（'src'）json

- 刪除元素： img.removeAttribute（'_src'）數組

2.html中offsetTop、clientTop、scrollTop、offsetTop各屬性介紹（轉）： https://blog.csdn.net/u013795673/article/details/52171411瀏覽器

3.onload事件：緩存

4.onscroll：`延時加載和，定時器一塊兒用會出現bug`函數

5.onerror：事件會在文檔或圖像加載過程當中發生錯誤時被觸發

三、思路整理：

1.可視區的大小 document.documentElement.clientHeight；

2.獲取每一張照片的位置絕對位置到頂部的距離 li.offsetTop img[i] mytools.offset(img[i]).top object.getBoundingClientRect( ).top：元素上邊到視窗上邊的距離;

3.clientHeight pageYOffset offsetTop 可視區的大小 + 滾動條的距離 >= 每一張的絕對位置 document.documentElement.clientHeight + window.pageYOffset >=li[i].offsetTop

4.把全部須要延時加載的圖片改爲以下的格式：一、`<img lazy_src="圖片路徑" border="0"/>` 而後在頁面加載時，把全部使用了lazy_src的圖片都保存到數組裏，而後在滾動時計算可視區域的top，而後把延時加載的圖片中top小於當前可視區域（即圖片出如今可視區域內）的圖片的src的值用lazy_src的來替換（加載圖片）：

四、編程過程：

1.結構中,把全部須要延時加載的圖片改爲以下的格式：<img lazy_src="圖片路徑" border="0"/>

2.獲得每個li給li添加判斷（比圖片小paddingtop=10px） (若是可視區的大小 + 滾動條的距離 <=每一張的絕對位置 ) 改格式

3.forEach循環檢查標記，有標記進行操做；

4.給瀏覽器緩存一張照片，觸發照片的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.可視區的大小   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                 可視區的大小 + 滾動條的距離 >= 每一張的絕對位置 
34                document.documentElement.clientHeight + window.pageYOffset >=li[i].offsetTop
35               
36               4.把全部須要延時加載的圖片改爲以下的格式：一、<img lazy_src="圖片路徑" border="0"/>
37 
38               而後在頁面加載時，保存到img1 = new Image中，而後在滾動時計算可視區域的top，而後把延時加載的圖片中top小於當前可視區域（即圖片出如今可視區域內）的圖片的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中的函數讓其運行一次，可視區域內有內容
45         onscroll = lazy_load; //滾動事件添加給函數；（onscroll 事件在元素滾動條在滾動時觸發。）
46         function lazy_load() {
47             //結構中,把全部須要延時加載的圖片改爲以下的格式：一、<img lazy_src="圖片路徑" border="0"/>
48             //獲得每個li給li添加判斷(比圖片小paddingtop=10px) ， (若是可視區的大小 + 滾動條的距離 <=每一張的絕對位置 ) 改格式  
49             //forEach循環檢查標記，有標記進行操做；
50             //給瀏覽器緩存一張照片，觸發照片的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               //***給瀏覽器緩存一張照片，觸發照片的onload事件，將緩存照片地址賦給頁面中的img***
59                         let img1 = new Image; //建立對象  new Image()
60                         img1.src =img.getAttribute('_src'); //這樣作就至關於給瀏覽器緩存了一張圖片。
61                         //若是圖片加載成功就會進入onload事件，加載完成後執行； 
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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。