Home >Web Front-end >HTML Tutorial >How to delay loading of images?

How to delay loading of images?

PHP中文网Original: 2017-06-22 10:51:312602browse

Are you still worried about the loading speed of web pages? Have you ever found that web pages are very fast in some browsers, but very slow in others? Today I would like to introduce to you why these situations occur, and share with you the specific implementation methods

1. First explain to you why you need to delay loading of images

Everyone knows the common formats of images Well, a picture is a group of pixels that are put together little by little. The more pixels a picture has, the larger it will be. Generally, pictures are several kb, tens of kb, or several MB in size. Imagine that if your image is 10kb, then it doesn't matter whether it is delayed or not, but if it is tens of kb or hundreds of kb, how many more seconds will the user be asked to wait? You can’t make users wait for tens of seconds to watch the content just because of a picture, right?

2. Implementation of delayed image loading

In fact, the function of delayed image loading is not uncommon, and some browsers have implemented browser delayed loading of images, but it is not supported. What about the browser?

Then I’ll figure it out myself, okay! Without further ado, let’s paste the code first:

//    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)();
 }

Example:

<!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(&#39;第一张图片已加载完成！&#39;);
                 }
            },
            { 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(&#39;所有图片已加载！&#39;);
         }
        onLoadImage();
    </script>
</body>
</html>

The following is a test screenshot:

The above is the detailed content of How to delay loading of images?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The difference between padding and margin in CSSNext article：The difference between padding and margin in CSS

See more

How to delay loading of images?

Related articles