1949啦网--小小-jquery图片延迟加载

13

2019
06

jquery图片延迟加载

大家还在为网页加载速度而烦恼吗？大家有发现网页在某些浏览器很快，而在某些浏览器却很慢吗？今天向大家介绍一下为何会出现这些情况，并给大家分享一下具体的实现方法

1、先向大家讲解一下为何需要图片延迟加载

大家知道图片的常见格式吧，图片就是一个把一点一点像素组合在一起的一组像素，图片它像素越多大小越大。一般的图片都有几kb，几十kb，大的几mb都有。这样设想如果你的图片是10kb，那么延不延迟无所谓了吧，但是如果是几十kb或者几百kb呢，让用户多等几秒？总不能因为一张图片，让用户等待几十秒才能看的内容吧？

2、图片延迟加载的实现

其实，图片延迟加载这个功能已经不是很少见了，而且部分浏览器已经实现浏览器延迟加载图片了，但是不支持的浏览器怎么办？

那么我就自己想办法，好！废话就不多说了，先贴上代码：

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		 <img src="https://www.qiquanji.com/data/img/dmj/201907221563759581652738.png" title="ty001.png" alt="ty001.png" width="136" height="98" style="width: 136px; height: 98px;" id="img1" alt="正在加载"></img>
        <img src="https://www.qiquanji.com/data/img/dmj/201907221563759581652738.png" title="ty001.png" alt="ty001.png" width="136" height="98" style="width: 136px; height: 98px;" id="img2" alt="正在加载"></img>
        <img src="https://www.qiquanji.com/data/img/dmj/201907221563759581652738.png" title="ty001.png" alt="ty001.png" width="136" height="98" style="width: 136px; height: 98px;" id="img3" alt="正在加载"></img>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            window.imageList=[
            {
                id:"img1",
                url:"https://www.qiquanji.com/data/img/dmj/201907221563759314467271.jpg",
                onload:function(){
                        alert('第一张图片已加载完成！');
                    } 
                },
                { id:"img2", url:"https://www.qiquanji.com/data/img/dmj/201907221563759314151139.jpg"},
                { id:"img3", url:"https://www.qiquanji.com/data/img/dmj/201907221563759314549912.jpg"}
            ];
            window.onImageAllLoad=function(){
                alert('所有图片已加载！');
            }
            onLoadImage();
            
            
/*
*            图片延迟加载器
*    优新世纪工作室-恋空 编写
*
*/

//
//    window.imageList=[
//        { id:"图像1ID", url:"URL", onload=加载函数 },
//        { id:"图像2ID", url:"URL", onload=加载函数 },
//        { id:"图像3ID", url:"URL", onload=加载函数 },
//        ....
//    ];

//在页面加载完成后调用 onLoadImage();

function onLoadImage()
{
    var i=0;
    if(window.imageList){
        //if(typeof window.imageList != "array")
        //    return;
        for(i=0;i<window.imageList.length;i++){
            var now=window.imageList[i];
            var id,url,onloadfn;
            if(now.id){
                id=now.id;
            }
            if(now.url){
                url=now.url;
            }
            if(now.onload){
                onloadfn=now.onload;
            }
            if(id == null || url == null){
                continue;
            }
            var nelement = document.getElementById(id);
            nelement.src = url;
            if(onloadfn)
                (onloadfn)(nelement,url);
            id = url = onloadfn = null;
        }
    }
    console.log("All Image is loaded!Total "+i+" Image!");
    if(window.onImageAllLoad)
        (window.onImageAllLoad)();
}
        </script>
	</body>
</html>

效果静态图：