图片的懒加载

每日一题

HTML 篇

0113-- 网站开发中，如何实现图片的懒加载

1、在vue中实现懒加载（未测试完）

npm 安装 插件

npm install vue-lazyload -s

模块化引入

import lazyload from "vue-lazyload"

在VUE中引入一张图片，单引号里面的就是到时候懒加载时候显示的图片，具体路径大家自己找对自己的路径

Vue.use(
lazyload,{
    loading:'../static/images/ttp.gif'}
)

下一步我们找到需要实现懒加载的图片位置代码，如：

<img :src="listB[0].Pic"/>

我们将 :src 改为 v-lazy即可，改完如下：

<img v-lazy="listB[0].Pic"/>

这样我们的懒加载就实现了

2、echo.js （测试完毕）

有现成的懒加载图片的js echo.js

https://laod.cn/page/javascript-echo-js.html

http://amazeui.github.io/echo/

<script src="js/echo.min.js"></script>
<script>    
    Echo.init({
        offset: 0,//离可视区域多少像素的图片可以被加载 0
　　    throttle: 5000, //图片延时多少毫秒加载 250
        debounce:true,//防抖动 true
        unload:false,//告诉echo是加载还是卸载视图中的图片，当图片离开视图区域时触发  false
        callback:function(element, op){
            if(op==='load'){
                element.classList.add('loaded');
            } else {
            element.classList.remove('loaded');
            }
            // console.log(element, op)
            // console.log("load ok")
        }//回调函数，用来检测图片是否加载	function()
    }); 
<script>

    <div class="demo">
        <img class="lazy" src="images/loading.gif" data-echo="images/1.gif">
    </div>

    <style>
        .demo img {
            width: 80%; 
            height: 100%; 
            background: url(images/loading.gif) 50% no-repeat;
        } 
    </style>

3、函数节流（throttle）与函数去抖（debounce）、scroll （测试完毕）

    <style>
        img {
            display: block;
            margin-bottom: 10px;
            width: 700px;
        }
    </style>

    <img src="images/loading.gif" data-src="images/1.gif">
    <img src="images/loading.gif" data-src="images/2.gif">
    <img src="images/loading.gif" data-src="images/3.gif">

    //函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，
    function throttle(fn, delay, atleast) {
        //进行去抖处理
        var timeout = null,
        startTime = new Date();
        return function() {
            var curTime = new Date();
            clearTimeout(timeout);
            if(curTime - startTime >= atleast) {
                fn();
                startTime = curTime;
            }else {
                timeout = setTimeout(fn, delay);
            }
        }
    }
    function lazyload() {
        var images = document.getElementsByTagName('img');
        var len = images.length;
        //存储图片加载到的位置，避免每次都从第一张图片开始遍历        
        var n = 0;
        return function() {
            var seeHeight = document.documentElement.clientHeight;
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            for(var i = n; i < len; i++) {
                if(images[i].offsetTop < seeHeight + scrollTop) {
                    if(images[i].getAttribute('src') === 'images/loading.gif') {
                     images[i].src = images[i].getAttribute('data-src');
                    }
                    n = n + 1;
                 }
            }
        }
    }
    

    var loadImages = lazyload();
    //初始化首页的页面图片
    loadImages();
    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
    //函数节流（throttle）与函数去抖（debounce）处理,
    //500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数