zoukankan      html  css  js  c++  java
  • 前端实现图片懒加载

    项目中经常会遇到多图片需要加载的情况,如果一次性全部加载完耗时较多,也较慢。这时就需要用到图片懒加载,常用的有jqueryLazyload这个插件。下载地址:https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js

    使用时,首先得引入jquery,然后再引入jqueryLazyload这个插件,原理就是先不给img加src路径,然后把路径加在属性节点data-original上,在满足条件需要加载的时候再把data-original上的路径添加到src上。用法如下:

    <!-- 引入图片列表 -->
      <section class="module-section" id="container">
          <img class="lazy-load" data-original="./images/1.jpg" width="640" height="480" alt="测试懒加载图片"/>
          <img class="lazy-load" data-original="./images/2.jpg" width="640" height="480" alt="测试懒加载图片"/>
          <img class="lazy-load" data-original="./images/3.jpg" width="640" height="480" alt="测试懒加载图片"/>
          <img class="lazy-load" data-original="./images/4.jpg" width="640" height="480" alt="测试懒加载图片"/>
          <img class="lazy-load" data-original="./images/5.jpg" width="640" height="480" alt="测试懒加载图片"/>
          <img class="lazy-load" data-original="./images/6.jpg" width="640" height="480" alt="测试懒加载图片"/>
          <img class="lazy-load" data-original="./images/7.jpg" width="640" height="480" alt="测试懒加载图片"/>
          <img class="lazy-load" data-original="./images/8.jpg" width="640" height="480" alt="测试懒加载图片"/>
          <img class="lazy-load" data-original="./images/9.jpg" width="640" height="480" alt="测试懒加载图片"/>
          <img class="lazy-load" data-original="./images/4.jpg" width="640" height="480" alt="测试懒加载图片"/>
      </section>
    

    然后在js里使用:

        $(document).ready(function() {     
            $("img.lazy-load").lazyload({ 
              placeholder : "./images/bg.png",
        effect : "fadeIn", //渐现,show(直接显示),fadeIn(淡入),slideDown(下拉)
       //threshold : 380, //预加载,在图片距离屏幕180px时提前载入
             //event: 'click',
       //container: $("#container"), // 指定对某容器中的图片实现效果
        }); 
       });
    
  • 相关阅读:
    python-web自动化-Js-滚动条操作
    python-web自动化-键盘操作
    python-web自动化:下拉列表操作
    python-web自动化-鼠标操作
    FastAPI 项目结构组织,工厂模式创建
    JavaScript fetch简单封装
    Python循环删除中遇到的小坑
    20200707 千锤百炼软工人第二天
    20200706 千锤百炼软工人第一天
    小谢第25问:iframe怎么向页面传值?
  • 原文地址:https://www.cnblogs.com/dxzg/p/9045027.html
Copyright © 2011-2022 走看看