武漢網絡公司在設計中如何判斷加載完畢

作者：龍 時(shí)間：2018-07-20 浏覽：

1.前言

在之前的(de)工作中，越大(dà)過這(zhè)樣的(de)場(chǎng)景，在做(zuò)banner圖的(de)時(shí)候，使用(yòng)的(de)定位，實現圖片的(de)淡入淡出和(hé)放大(dà)效果，

<!--html-->
 <ul>
    <li>
        <a href="#"><img src="img/jd/banner061901.jpg"></a>
    </li>
    <li>
        <a href="#"><img src="img/jd/banner061902.jpg"></a>
    </li>
    <li>
        <a href="#"><img src="img/jd/banner061903.jpg"></a>
    </li>
</ul>

但是在本地的(de)看不出什(shén)麽問題，但是在服務器上就能看出問題，其中li使用(yòng)了(le)定位，這(zhè)是ul講不繼承li的(de)高(gāo)度，再加上頁面是自适應，又不能給ul添加高(gāo)度，所以要動态的(de)計算(suàn)其尺寸。

    var time_img; // 定時(shí)器
    var isLoaded = true; // 控制變量

    // 判斷圖片加載狀況，加載完成後回調
    isImgLoad(function(){
       $('.swipe ul').height($('.swipe img').css('height'));
    });
    $(window).resize(function(){
       $('.swipe ul').height($('.swipe img').css('height'));
    });
    // 封裝函數
    function isImgLoad(callback){
        $('.banner img').each(function(){
            if(this.height === 0){
                isLoaded = false;
                return false;
            }
        });
        
        if(isLoaded){
        // isLoaded爲true，沒有發現爲height=0的(de)。加載完畢
            clearTimeout(time_img); // 清除定時(shí)器
            // 回調函數
            callback();
       
        }else{
         //isLoaded爲爲false，因爲找到了(le)沒有加載完成的(de)圖，将調用(yòng)定時(shí)器遞歸
            isLoaded = true;
            time_img = setTimeout(function(){
                isImgLoad(callback); // 遞歸掃描
            },300); //設置掃描時(shí)間
        }
    }

2.onload與ready

ready是jquery封裝的(de)方法，隻是表示頁面的(de)結構渲染完成，并不表示頁面的(de)資源被加載完成，而onload方法時(shí)原生的(de)方法，指dom的(de)生成和(hé)資源完全加載（比如圖片等）出來(lái)後才執行

// HTML
<img id='bannerItem' src="http://www.whtlnet.com/uploadfile/ImgFile/2013-11/Img2013111300220767486.jpg">  

//js
    $(document).ready(function(){

    //jquery
    $('.bannerItem').load(function(){
       // 加載完成 
       $('.swipe ul').height($('.swipe img').css('height'));
    });

   //原生  onload
    var img = document.getElementById('bannerItem')
    img.onload =img.onreadystatechange = function(){
       if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
           // 加載完成 
            $('.swipe ul').height($('.swipe img').css('height'));
       }
    };

})

3.配合es6中Promise對(duì)象使用(yòng)

3.1單張

 new Promise((resolve, reject)=>{
    let bannerItem= new Image()
    bannerItem.src = 'http://www.whtlnet.com/uploadfile/ImgFile/2013-11/Img2013111300220767486.jpg'
    bannerItem.onload = function(){
       resolve(bannerItem)
    }
 }).then((bannerItem)=>{
    //code
    $('.swipe ul').height($('.swipe img').css('height'));
 })

3.2多(duō)張

promise對(duì)象的(de)all()方法

const imgarr = [
     'http://www.whtlnet.com/uploadfile/ImgFile/2013-11/Img2013111300220767486.jpg',
     'http://www.whtlnet.com/uploadfile/ImgFile/2013-04/Img2013041116301259095.jpg',
     'http://www.whtlnet.com/uploadfile/ImgFile/2013-04/Img2013041116293911935.jpg'
 ];
 
 //創建每個(gè)圖片的(de)promise對(duì)象
const promiseImgAllArr = [], imgAllarr = [];
 for(let i = 0 ; i < imgarr.length ; i++){
     promiseImgAllArr[i] = new Promise((resolve, reject)=>{
         imgAllarr[i] = new Image()
         imgAllarr[i].src = mulitImg[i]
         imgAllarr[i].onload = function(){
              //第i張加載完成
              resolve(imgAllarr[i])
         }
     })
 }
 
 //将圖片的(de)promise對(duì)象的(de)集合傳給promise的(de)all方法作爲參數
 Promise.all(promiseImgAllArr).then((img)=>{
     //全部加載完成
     $('.swipe ul').height($('.swipe img').css('height'));
 })

    公司名稱：武漢互赢網絡科技有限公司

　　公司地址：武漢市武昌區(qū)靜安路6号創意産業園408室

　　客 服QQ：562257562 848467306

　　咨詢電話(huà)：027-89992189

　　業務熱(rè)線：15972109576

　　公司網站：www.whtlnet.com