zoukankan      html  css  js  c++  java
  • 京东商城延迟加载

    图片延迟加载练习

    1、javascript实现图片延迟加载方法汇总(三种方法)(转)

     

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

    2、知识点应用:

     1.浏览器尺寸获取:

    - 可视区高度: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: 事件会在文档或图像加载过程中发生错误时被触发

    3、思路整理

    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.把所有需要延时加载的图片改成如下的格式:1、`<img lazy_src="图片路径" border="0"/>` 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片):

    4、编程过程

    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.把所有需要延时加载的图片改成如下的格式:1、<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             //结构中,把所有需要延时加载的图片改成如下的格式:1、<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>

     

  • 相关阅读:
    LeetCode 121. Best Time to Buy and Sell Stock
    LeetCode 221. Maximal Square
    LeetCode 152. Maximum Product Subarray
    LeetCode 53. Maximum Subarray
    LeetCode 91. Decode Ways
    LeetCode 64. Minimum Path Sum
    LeetCode 264. Ugly Number II
    LeetCode 263. Ugly Number
    LeetCode 50. Pow(x, n)
    LeetCode 279. Perfect Squares
  • 原文地址:https://www.cnblogs.com/zijie-li/p/9847024.html
Copyright © 2011-2022 走看看