京东商城延迟加载

时间 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>