武汉网络公司在设计中如何判断加载完毕

作者：龙 时间：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