zoukankan      html  css  js  c++  java
  • 图片懒加载

      图片懒加载一般运用到图片较多的页面,电商类的页面一般都有图片懒加载处理。

    步骤:

    • 将要懒加载的网页中的图片都设为同一张loading图片;
    • 给图片设置data-src的属性,保存图片的真实地址;
    • 当图片滚动到可视区域时,将图片src替换为真实地址。

    结构层

    <ul>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
            <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
            <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
     </ul>
    View Code

    表现层

    容器尺寸最好设置成图片尺寸,避免layout,或者将图片设置成真实地址图片的大小
    li{height:300px;}

    行为层

    下面这句判断图片进入可视区域

    obj.getBoundingClientRect().top< document.documentElement.clientHeight

    页面加载后首屏自动加载一次,不然进入页面滚动前的图片全是loading图片

    window.onload = function() {
             lazyload();
         };

    完整代码,已将需要注意的点都加上注释了:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>lazyLoad nick</title>
        <style>
            /*容器尺寸最好设置成图片尺寸,避免layout*/
            li{height:300px;}
        </style>
    </head>
    <body>
     <ul>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
            <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
            <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
         <li>
             <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
         </li>
     </ul>
    
     <script>
         window.onscroll = function() {//滚动加载
             lazyload();
         };
         window.onload = function() {//页面加载后首屏自动加载一次
             lazyload();
         };
         function lazyload(lazy) {
              lazy = lazy||50;//提前加载的距离
             var images = document.images,i = 0, len = images.length;
             for (; i < len; i++) {
                 var obj = images[i];
    //             obj.getBoundingClientRect().top< document.documentElement.clientHeight 判断元素滚动到可视区返回true
                 if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
                     obj.isLoad = true;//判断首次加载
                     imageLoaded(obj, obj.dataset.src);
                 }
             }
         }
         function imageLoaded(obj,src){//img加载完成在设置src,避免img从顶部加载到尾部出现的白板
             var img = new Image();
             img.onload = function() {
                 obj.src = img.src;
             };
             img.src = src;
         }
    
     </script>
    </body>
    </html>
    View Code

    纯属没事乱捣腾,有建议或意见请q我!

  • 相关阅读:
    jquery同步请求
    js换空格为别的元素
    获取页面的checkbox,并给参数赋值
    jQuery判断checkbox是否选中的3种方法
    opencv基础知识------IplImage, CvMat, Mat 的关系和相互转换
    Opencv基础知识-----视频的读取和操作
    OpenCV 基础知识------图像创建、访问、转换
    windows消息钩子注册底层机制浅析
    Windows内核遍历驱动模块源码分析
    VC 快速创建多层文件夹
  • 原文地址:https://www.cnblogs.com/puyongsong/p/6135143.html
Copyright © 2011-2022 走看看