Img load

懒加载（又称为延迟加载图片）或符合某些条件时才加载某些图片

懒加载的意义：主要目的是作为服务器前段的优化，减少请求或延迟请求的次数。

呈现懒加载的三种形式：

①.纯粹的延时加载，使用setTimeout或者setInterval进行加载延迟，如果用户在加载前就离开了，那么自然就不会进行加载。

②.第二种就是条件加载，符合某些条件，或者触发了某些事件才开始异步加载。

③.第三种就是可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般据用户看到的底边很近的时候开始加载，这样能保证用户下拉的时候图片正好接上，不会有太长时间的停顿。

使用优点分析

a. 提高网页加载速度，直接影响收录与排名--在蜘蛛抓去的时候，爬行网页会非常快速，以至于页面优化值得到最大提升。

b. 减少请求，降低服务器压力。--只有当用户滚动到可视范围内才加载图片，下载次数减少

使用缺点分析

a. 图片不会被收录

蜘蛛会收录图片到，自己服务器的图片库中。但因为我们的静态页面的图片都指向一张，所以图片不会被蜘蛛收录。

b. 页面又要引入一个 js

我们开发者更希望简单，而不是引入一堆东西，因为很少人去关注源码，很怕会出问题

如何使用js懒加载图片

懒加载图片工具：使用jquery.lazyload.js的机制

http://www.appelsiini.net/projects/lazyload

基本步骤

1.网页中的图片，都设为同一张图片。

2.给图片增加 data-original="img/example.jpg" 的属性，保存这张图片的真实地址。

3.当滚动条到达用户可视区域后，插件自动改变该区域的图片的src属性为缓存的地址。

4.浏览器加载可视区域图。

注意：

1.增加 data-original="图片真实地址"

2.页面所有的img标签的src属性指向同一个图片(图片未加载时，显示的一张临时图)

3.图片一定要设置 width 与 height （有宽高，浏览器就可以分配空间位置，否则就要等待获取图片宽高，或者以后重绘来再次排版。）

img标签在使用的时候一下几个事件非常的有用：
onError ：当图片加载出现错误，会触发经常在这里事件里头写入将图片导向默认报错图片，以免页面上出现红色的叉叉.
onLoad ：事件是当图片加载完成之后触发 .
onAbort ：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载”.

<img src="test.png" data-original="example.jpg" width="480" height="480">

之后可以直接用插件处理$("img.lazy").lazyload(); 当然，也可以自己进行DOM的书写（也不难）

data-original这个一般设定图像的真实地址。而src就导入一张所有图片站位的图片地址，这个站位图片，再最开始就已经下载好了。

<body>
<button>加载图片</button>
<img src="test.png" alt="测试" data-original = "test2.png">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg = document.images[0];   

//延迟加载，给图片加了 载入事件
function aftLoadImg(obj, url){
    var oImg = new Image();
    oImg.onload = function(){
        obj.src = oImg.src;
    }
    oImg.src = url;
}
 
oBtn.onclick = function(){
    oImg.src = "test2.png";　　　　// 如果图片不是很大，就直接改一下src就可以了，

    for (var pro in oImg.dataset) {　　//这里证明，dataset里面有一个orignial属性，是test2.png。
        document.write(pro + " " +oImg.dataset[pro] + "</br>");
        //会打印出  original test2.png
    }
　　
　　 //如果觉得图片有点大，就直接加载一个事件，上面已经说明过，图像是有onload事件的，等加载完毕后在显示。
    if(oImg.dataset){　　　　　　　　//是否可以获取dataset属性。
        aftLoadImg(oImg, oImg.dataset.original);    
    }
    else{
        aftLoadImg(oImg,oImg.getAttribute("data-original"));
    }
}
</script>    
</body>

使用jQuery插件

a.懒加载图片是基于jquery.js的，所以：

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

b. 需要懒加载的图片，　　①.增加 data-original="图片真实地址"

②.页面所有的img标签的src属性指向同一个图片(图片未加载时，显示的一张临时图)

③.图片一定要设置 width 与 height

注意：这点你可能没办法接受，因为需要改变你的html

<img src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

c.把需要懒加载的图片，选中，然后调用插件函数就ok了！

 $("img.lazy").lazyload();

另一种方式，通过判断滚动条的位置，来选择加载的时机

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
     500px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}

img{
    border: none;
    vertical-align: middle;
}
.in{
    border: 1px solid black;
    margin: 10px;
    text-align: center;
    height: 400px;
     400px;
    float: left;
}
.in img{
    height: 400px;
     400px;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>    
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>    
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>    
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>    
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>    
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/1.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/2.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/3.png"></li>
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/4.png"></li>    
</ul>

<script>

var aImages = document.images;
alert(aImages.length);
loadImg(aImages);

window.onscroll = function(){
    loadImg(aImages);
};


function loadImg(arr) {
    for ( var i = 0,len = arr.length; i < len; i++) {
        //  分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角（注意，不是文档区域的左上角）的偏移像素值
        if (arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
            arr[i].isLoad = true;
            arr[i].style.cssText = "transition: ''; opacity: 0;";
            if (arr[i].dataset) {
                aftLoadImg(arr[i], arr[i].dataset.original);    
            } else {
                aftLoadImg(arr[i], arr[i].getAttribute("data-original"));
            }

            (function(i){
                setTimeout(function(){
                    arr[i].style.cssText = "transition: 1s; opacity: 1;"    //transition CSS3渐变
                }, 16);
            })(i);
        }
    }
}

function aftLoadImg(obj, url){
    var oImg = new Image();
    oImg.onload = function() {
        obj.src = oImg.src;
    }
    oImg.src = url;
}

</script>    
</body>
</html>

//获得对象距离页面顶端的距离

function getH(obj) {  
    var h = 0;  
    while (obj) {  
        h += obj.offsetTop;  
        obj = obj.offsetParent;  
    }  
    return h;  
}

//当网页的滚动条滚动时要时时判断当前li的位置！

        window.onscroll = function () {
            var oDiv = document.getElementById('listID');
            var oUl = oDiv.children[0];
            var aLi = oUl.children;

            for (var i = 0, l = aLi.length; i < l; i++) {
                var oLi = aLi[i];
                //检查oLi是否在可视区域
                var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
                var h = getH(oLi);
                if (h < t) {
                    setTimeout("setImg(" + i + ")", 500);
                }
            }
        };

//当页面加载完成以后要主动运行一下window.onscroll，从而获得当前可视范围内的图片。

window.onload = function () {  
    window.onscroll();  
};

参考：

http://blog.csdn.net/pvfhv/article/details/6176099

http://blog.163.com/hongshaoguoguo@126/blog/static/180469812014114102332873/

相关阅读:
【笔记】寻址方式
 今日思考之 20200614：java 中 null 是否对 gc 有帮助？
分布式唯一ID生成方案对比分析笔记
 请不要再称数据库是CP或者AP——CAP的误导（短板）和它的使命
 延迟初始化中的双重检查模式和延迟占位类模式你都用对了吗？
redis bitmap
RabbitMQ 使用 Policies HTTP API 绑定和解绑 DLX
spring boot 自动装配的实现原理和骚操作，不同版本实现细节，debug 到裂开......
netty 学习笔记三：大跃进，使用 netty 实现 IM 即时通讯系统
 一道 Java 方法传值面试题——Java方法传值的值传递概念和效果 + Integer 缓存机制 + 反射修改 private final 域
原文地址：https://www.cnblogs.com/hgonlywj/p/4860493.html

热门文章
递归之斐波那契
 java IO流
 Java I/O流
 堆排序
 快速排序
 完全二叉树
 String2
String
进程概念
 并发