欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

怎么让图片延迟加载？

程序员文章站 2022-04-20 11:22:18
...
大家还在为网页加载速度而烦恼吗？大家有发现网页在某些浏览器很快，而在某些浏览器却很慢吗？今天向大家介绍一下为何会出现这些情况，并给大家分享一下具体的实现方法

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>

下面是测试截图：

怎么让图片延迟加载？怎么让图片延迟加载？怎么让图片延迟加载？

以上就是怎么让图片延迟加载？的详细内容，更多请关注其它相关文章！

相关标签： 延迟 图片 加速 网页

上一篇： 具体介绍什么程序员都要关注JavaScript

下一篇： 文章推荐系统（三）_php基础

推荐阅读