图片的懒加载的两种效果

这篇文章主要介绍了javascript实现图片懒加载的方法及思路，有时我们需要用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力,需要的朋友可以参考下

一、定义

　　图片延迟加载也称为懒加载，延迟加载图片或符合某些条件时才加载某些图片，通常用于图片比较多的网页。可以减少请求图片数量或者延迟请求时间，优化网页性能。

二、原理

　　将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

三、呈现形式

　　1、延时加载，使用setTimeout或setInterval进行加载延迟，如果用户在加载前就离开，自然就不会进行加载。
　　2、条件加载，符合某些条件或者触发了某些条件才开始异步加载。
　　3、可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般距离用户看到的底边很近的时候开始加载，这样能保证用户下拉时图片正好接上，不会有太长时间的停顿。

 四、基本步骤

　　1、网页中的图片都设为同一张图片
　　2、给图片增加data-src = "img/timg.jpg"的属性，保存图片的真实地址
　　3、当触发某些条件时，自动改变该区域的图片的src属性为真实的地址 

 

第一种：JavaScript实现的方式

　　HTML：

        <div class="container">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
            <img src="" data-src="img/timg.jpg" alt="">
        </div>

　　JavaScript：

// 这是懒加载的方式

// 首先获得页面当中所有的图片
var img = document.getElementsByTagName("img");

//存储图片加载到的位置，避免每次都从第一张图片开始遍历
var n = 0;

//页面载入完毕加载可是区域内的图片
lazyload();

// 注册滚动条滚动事件
window.onscroll = lazyload;

//监听页面滚动事件
function lazyload() {
    //可见区域高度
    var seeHeight = document.documentElement.clientHeight;

    /* 滚动条距离顶部高度
     * document.body.scrollTop：chrome
     * document.documentElement.scrollTop：FF
     * */
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    for(var i = n; i < img.length; i++) {
        /*
         * 当前图片相对于页面顶部的距离  <= 可视区域 + 滚动条距离距离顶部的距离
         * */
        if(img[i].offsetTop < seeHeight + scrollTop - 800) {
            // 将img[i]的src设置成img[i]的data-src
            if(img[i].getAttribute("src") == "") {
                img[i].src = img[i].getAttribute("data-src");
            }
            n = i + 1;
        }
    }
}

 

第二种：jQuery实现的方式

　　jQuery：

// 變量n儲存圖片加載的位置，防止每次都從第一張開始加載
var n = 0,
    img = $('img');

// 页面刷新时首先调用一次加载函数
lazyload();

// 注册滚动监听函数
$(window).scroll(lazyload);

function lazyload() {
    for(var i = n; i < img.length; i++) {
        /*
         * offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
         * offset().top 方法返回元素距离页面顶部的距离
         * scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
         * */
        if(img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop()) - 600) {
            // 如果每个img的src为空的话，给每个img的src赋值为data-src的值
            if(img.eq(i).attr("src") == "") {
                var src = img.eq(i).attr("data-src");
                img.eq(i).attr("src", src);
                n = i + 1;
            }
        }
    }
}