亚洲一区二区三区无码少年_日韩亚洲欧美综合一区二区三区_国产精品成人69xxx_被主人狠狠调教打屁股_国产女厕所偷窥系列在线视频_老头猛挺进王进霞的体内视频_日本女同伦理片_一级毛片特黄视频免费观看_国产成人无码免费看视频软件

武漢網(wǎng)絡(luò)公司在設(shè)計中如何判斷加載完畢

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

1.前言

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

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

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

    var time_img; // 定時器
    var isLoaded = true; // 控制變量

    // 判斷圖片加載狀況，加載完成后回調(diào)
    isImgLoad(function(){
       $('.swipe ul').height($('.swipe img').css('height'));
    });
    $(window).resize(function(){
       $('.swipe ul').height($('.swipe img').css('height'));
    });
    // 封裝函數(shù)
    function isImgLoad(callback){
        $('.banner img').each(function(){
            if(this.height === 0){
                isLoaded = false;
                return false;
            }
        });
        
        if(isLoaded){
        // isLoaded為true，沒有發(fā)現(xiàn)為height=0的。加載完畢
            clearTimeout(time_img); // 清除定時器
            // 回調(diào)函數(shù)
            callback();
       
        }else{
         //isLoaded為為false，因為找到了沒有加載完成的圖，將調(diào)用定時器遞歸
            isLoaded = true;
            time_img = setTimeout(function(){
                isImgLoad(callback); // 遞歸掃描
            },300); //設(shè)置掃描時間
        }
    }

2.onload與ready

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

// 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'
 ];
 
 //創(chuàng)建每個圖片的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方法作為參數(shù)
 Promise.all(promiseImgAllArr).then((img)=>{
     //全部加載完成
     $('.swipe ul').height($('.swipe img').css('height'));
 })

    公司名稱：武漢互贏網(wǎng)絡(luò)科技有限公司

　　公司地址：武漢市武昌區(qū)靜安路6號創(chuàng)意產(chǎn)業(yè)園408室

　　客 服QQ：562257562 848467306

　　咨詢電話：027-89992189

　　業(yè)務(wù)熱線：15972109576

　　公司網(wǎng)站：www.whtlnet.com