国产精品一区电影_国产男女无遮挡猛进猛出_日本丰满熟妇videossex8k_中文字幕无码乱人伦,久久综合伊人77777麻豆,亚洲最大在线观看,无码人妻久久一区二区三区app

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

作者：龍 時間：2018-07-20 瀏覽：

1.前言

在之前的工作中，越大過這樣的場景，在做banner圖的時候，使用的定位，實現圖片的淡入淡出和放大效果，

<!--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>

但是在本地的看不出什么問題，但是在服務器上就能看出問題，其中li使用了定位，這是ul講不繼承li的高度，再加上頁面是自適應，又不能給ul添加高度，所以要動態的計算其尺寸。

    var time_img; // 定時器
    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的。加載完畢
            clearTimeout(time_img); // 清除定時器
            // 回調函數
            callback();
       
        }else{
         //isLoaded為為false，因為找到了沒有加載完成的圖，將調用定時器遞歸
            isLoaded = true;
            time_img = setTimeout(function(){
                isImgLoad(callback); // 遞歸掃描
            },300); //設置掃描時間
        }
    }

2.onload與ready

ready是jquery封裝的方法，只是表示頁面的結構渲染完成，并不表示頁面的資源被加載完成，而onload方法時原生的方法，指dom的生成和資源完全加載（比如圖片等）出來后才執行

// 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對象使用

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多張

promise對象的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'
 ];
 
 //創建每個圖片的promise對象
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])
         }
     })
 }
 
 //將圖片的promise對象的集合傳給promise的all方法作為參數
 Promise.all(promiseImgAllArr).then((img)=>{
     //全部加載完成
     $('.swipe ul').height($('.swipe img').css('height'));
 })

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

　　公司地址：武漢市武昌區靜安路6號創意產業園408室

　　客 服QQ：562257562 848467306

　　咨詢電話：027-89992189

　　業務熱線：15972109576

　　公司網站：www.whtlnet.com