美文网首页JS/JQuery专题
JS 判断图片加载完成

JS 判断图片加载完成

作者: 追梦_1c27 | 来源:发表于2017-12-13 14:19 被阅读0次

    有时候我们需要获取页面中图片的宽高来完成某些操作,但是要想准确获取到图片的尺寸,需要一个前提条件,就是等待图片加载完之后再获取,就不会出问题了。不然图片未加载完就获取的话,获取的宽高为0;

    那么问题来了,怎么判断图片是否加载完了呢? 这里利用图片没有加载完成的时候,宽高为0。我们很容易判断图片的一个加载情况。

    使用定时器,每隔500毫秒获取一次图片的宽高;直到图片宽高不为0,即图片加载完成,此时获取到的图片的尺寸,就是图片加载完之后的尺寸。

    代码如下:

    vart_img;// 定时器

    varisLoad=true;// 控制变量

    // 判断图片加载状况,加载完成后回调

    isImgLoad(function(){

    // 加载完成

    });

    // 判断需要判断的图片是否加载完成的函数

    functionisImgLoad(callback){

    $('.img').each(function(){

    // 高度为0,说明有图片还未加载完成,将isLoad设为false,并退出each

    if(this.height===0){

    isLoad=false;

    returnfalse;

    }

    });

    // 直到图片没有发现为0的。加载完毕

    if(isLoad){

    clearTimeout(t_img);// 清除定时器

    callback();

    // 为false,因为找到了没有加载完成的图,将调用定时器递归

    }else{

    isLoad=true;

    t_img=setTimeout(function(){

    isImgLoad(callback);// 递归扫描

    },500);// 我这里设置的是500毫秒就扫描一次,可以自己调整

    }

    }

    相关文章

      网友评论

        本文标题:JS 判断图片加载完成

        本文链接:https://www.haomeiwen.com/subject/iqwaixtx.html