零基础建站培训介绍

当前位置:

jquery图片懒加载实现原理及方法

对于我们在制作图片网站时,一个版面上有大量的图片。用户进入我们网站后,如果图片全部同时加载的话,会严重拖慢网页打开速度,影响用户浏览体验。

jquery图片懒加载实现原理及方法

对于网页上有大量的图片时,解决加载时间过长的方法就是采用图片懒加载。

什么是图片懒加载

通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。

图片懒加载原理

将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src。

jquery图片懒加载实现原理及方法

图片懒加载实现方法

网站实现图片懒加载有二种方法,下面学做网站论坛就把网站图片懒加载的二种方法写给广大自学建网站爱好者们。

方法一:jqueryLazyload方式(需要网站引入了jquery.js)

  1. jquery图片懒加载所需要的JS文件。下载地址:https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js
  2. 懒加载的图片样式必须为以下的代码样式:
     <img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/>
  3. 图片懒加载控制JS
    require.config({
    baseUrl : "/static",
    paths: {
    jquery:'component/jquery/jquery-3.1.0.min'
    jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//图片懒加载
    },
    shim: {
    jqueryLazyload: {
    deps: ['jquery'],
    exports: '$'
    }
    }
    });require(
    [
    'jquery',
    'jqueryLazyload'
    ],
    function($){
    $(document).ready(function() {
    $("img.lazy-load").lazyload({
    effect : "fadeIn", //渐现,show(直接显示),fadeIn(淡入),slideDown(下拉)
    threshold : 180, //预加载,在图片距离屏幕180px时提前载入
    event: 'click', // 事件触发时才加载,click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll(滑动)
    container: $("#container"), // 指定对某容器中的图片实现效果
    failure_limit:2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况
    });
    });
    });
  4. 为了代码可读性,属性值我都写好了注释。值得注意的是预制图片属性为data-original,并且最好是给予初始高宽占位,以免影响布局,当然这里为了演示我是写死的640x480,如果是响应式页面,高宽需要动态计算。dome演示地址:http://h5.sztoda.cn/test/testLazyLoad

方法二:echo.js方式(无需jquery.js)

如果你的项目中没有依赖jquery,那么这将是个不错的选择,50行代码,压缩后才1k。

  1. 下载图片懒加载所需要的JS文件。下载地址:https://github.com/helijun/helijun/tree/master/plugin/echo
  2. 在自己网站的底部文件的</body>上方,放入以下的JS代码。
    <script src="js/echo.min.js"></script>

    <script>

    Echo.init({
        offset: 0,//离可视区域多少像素的图片可以被加载
       throttle: 0 //图片延时多少毫秒加载
    });

    </script>
  3. 图片样式代码如下:
       <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
  4. 说明:blank.gif是一张背景图片,包含在插件里了。图片的宽高必须设定,当然,可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。
上一课: 下一课:

发表评论