이미지 로딩을 지연시키는 방법은 무엇입니까?-HTML 튜토리얼-php.cn

이미지 로딩을 지연시키는 방법은 무엇입니까?

PHP中文网

풀어 주다： 2017-06-22 10:51:31

원래의

2563명이 탐색했습니다.

아직도 웹페이지 로딩 속도가 걱정되시나요? 웹페이지가 일부 브라우저에서는 빠르지만 다른 브라우저에서는 매우 느린 것을 본 적이 있습니까? 오늘은 이러한 상황이 발생하는 이유를 소개하고 구체적인 구현 방법을 공유하고자 합니다

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(&#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>

로그인 후 복사

다음은 테스트 스크린샷입니다.