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"), // 指定对某容器中的图片实现效果
        }); 
       });
    
  • 相关阅读:
    用php做了下冒泡排序
    安装xampp无法设置默认时间的坑
    PHP的静态变量和引用函数
    jquery.cookie.js 用法
    PhpStorm的open in browser怎么修改端口和相对路径
    springmvc上传图片并显示图片--支持多图片上传
    Spring MVC中处理静态资源的多种方法
    超强、超详细Redis数据库入门教程(转载)
    推荐60个jQuery插件(转)
    [Spring MVC]
  • 原文地址:https://www.cnblogs.com/dxzg/p/9045027.html
Copyright © 2011-2022 走看看