Img load

时间 2019-11-19

标签 img load 栏目 HTML 繁體版

原文原文链接

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

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

呈现懒加载的三种形式：

①.纯粹的延时加载，使用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="图片真实地址"javascript

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

③.图片必定要设置 width 与 height html

注意：这点你可能没办法接受，由于须要改变你的htmljava

<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;
    width: 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;
    width: 400px;
    float: left;
}
.in img{
    height: 400px;
    width: 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的位置！jquery

        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/