前端插件实现图片懒加载

Posted 2020-10-14 古兰精

一、echo.js：

　　我们在开发页面的时候肯定会遇到图片比较多的时候，虽然我们可能有图片分布式的服务器，但是在客户端还是会有很大的性能开销。为了用户体验，特别是对首屏加载速度要求很高的，通常我们会考虑图片延时加载，lazyloading这款插件已经能很好地实现这一功能，可是是基于jQuery，对于移动端可能不太实用。一个非常简单实用叫echo的插件，3k左右特别适合移动端使用。步骤如下：

1、在页面中需要引入echo.css和echo.min.js

2、对需要进行延迟加载的图片采用如下写法：

<img src="blank.gif" style="width:300px;height:300px;" data-echo="test.jpg" /> 

3、对插件进行初始化：

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

　　说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。

　　data-echo指向的是真正的图片地址。非常简单，这样的话图片只有出现在视野内时才会加载，减少了页面的渲染工作量。

二、jquery.lazyload.js：

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

<section class="module-section" id="container">
     <img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/>
</section>

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容器混乱的时候可能出现可见区域内图片并没加载出来的情况
　　　　　　}); 
　　　　});
　　});

　　为了代码可读性，属性值我都写好了注释。值得注意的是预制图片属性为data-original，并且最好是给予初始高宽占位，以免影响布局。