大家還在為網頁載入速度而煩惱嗎？大家有發現網頁在某些瀏覽器很快，在某些瀏覽器很慢嗎？今天向大家介紹一下為何會出現這些情況，並跟大家分享一下具體的實現方法
1.先向大家講解一下為何需要圖片延遲加載
大家知道圖片的常見格式吧，圖片就是一個把一點一點像素組合在一起的一組像素，圖片它像素越多大小越大。一般的圖片都有幾kb，幾十kb，大的幾mb都有。這樣設想如果你的圖片是10kb，那麼延遲不延遲就無所謂了吧，但如果是幾十kb或幾百kb呢，讓使用者多等幾秒？總不能因為一張圖片，讓使用者等待幾十秒才能看的內容吧？
2.圖片延遲載入的實作
其實，圖片延遲載入這個功能已經不是很少見了，而且部分瀏覽器已經實現瀏覽器延遲載入圖片了，但是不支援的瀏覽器怎麼辦？
那麼我就自己想辦法，好！廢話就不多說了，先貼上程式碼：
// 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)();
}實例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是一个测试</title>
</head>
<body>
<img id="img1" alt="正在加载"></img>
<img id="img2" alt="正在加载"></img>
<img id="img3" alt="正在加载"></img>
<script src="SuperImageLoader.js"></script>
<script>
window.imageList=[
{
id:"img1",
url:"https://www.baidu.com/img/baidu_jgylogo3.gif",
onload:function(){
alert('第一张图片已加载完成！');
}
},
{ id:"img2", url:"https://www.baidu.com/img/baidu_jgylogo3.gif"},
{ id:"img3", url:"https://www.baidu.com/img/baidu_jgylogo3.gif"}
];
window.onImageAllLoad=function(){
alert('所有图片已加载！');
}
onLoadImage();
</script>
</body>
</html>下面是測試截圖：
# #
以上是怎麼讓圖片延遲載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
