实现图片懒加载

作用

• 减少或延迟请求数，缓解浏览器的压力，增强用户体验

法一：编码实现

实现方式

1. 设置图片src属性默认为内存小的图片，自定义一个data-src属性来存储图片的真实地址
2. 页面初始化显示或者浏览器发生滚动时，判断图片是否在视窗中
3. 通过DOM操作设置该区域图片的src属性为真实地址

代码部分

• css+html

    
"container">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
        "http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1"
            data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
    

• (1) 用Jquery实现

<script>
	// 一打开页面，加载视窗中的图片
	start(); 
    // 加载函数：遍历图片，加载视窗中未加载的图片
    function start() {
        $('.container>img').not('[data-isLoaded]').each(function () {
            var $img = $(this);//this指向img，若用箭头函数，this指向window 
            // 页面逻辑：当元素高度 <= 窗口高度+滚动条高度，意味着到达目标点，即可加载图片
            if ($img.offset().top <= $(window).height() + $(window).scrollTop()) {
                // 缓冲效果
                setTimeout(function () {
                    $img.attr('src', $img.data('src')); //把图片真实地址赋值给src属性  
                    // 性能优化：对已加载的图片，设置属性值为1作为标识，在遍历图片时不会再被加载
                    $img.attr('data-isLoaded', 1);
                }, 500)
            }
        })
    }

	// 浏览器滚动事件
    $(window).on('scroll', function () {
        start();
    })
</script>

显示图片函数中的性能优化：设计思想是每次滚动时都要对图片进行遍历，那么标记已加载过的图片，后续进行排除，只对未加载的图片进行操作，便可大大提高性能

• (2) 用JS实现

<script>
	var imgs = document.querySelectorAll('img');
    lazyload(imgs);

    // 懒加载实现
    function lazyload(imgs) {
        var h = window.innerHeight; //可视区域高度
        var s = document.documentElement.scrollTop || document.body.scrollTop; //滚动区域高度
        imgs.forEach(val => {
            if(val.dataset['isLoaded']!='1'){
                if (val.offsetTop <= (h + s)) {
                setTimeout(function () {
                    // 获取自定义属性data-src，用真图片替换假图片
                    val.src = val.dataset['src'];
                    // val.data-isLoaded = '1'; 会报错！！
                    val.setAttribute("data-isLoaded","1");
                }, 500)
            }
            }
        });
    }

    // 滚屏函数
    window.onscroll = function () {
        lazyload(imgs);
    }

法二：利用插件

参考博客

• 基于jQuery的图片延迟加载插件jQuery.lazyload，使用延迟加载可提高网页下载速度
• 其使用方法：

1. 引入jquery.js和jquery.lazyload.js
2. 图片的真实地址必须放在data-original属性中，代码如下：

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />

$(function() {
    $(".lazy").lazyload({
		threshold: 200; //图片在距离屏幕 200px 时提前加载
		event: "click"; //当用户点击图片时才进行加载
		effect: "fadeIn"; //图片加载有淡入效果
	});
});