javaScript & jquery完美判断图片是否加载完毕

最新推荐文章于 2021-06-09 16:20:38 发布

修炼到救赎

最新推荐文章于 2021-06-09 16:20:38 发布

阅读量2.4k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

102 篇文章 0 订阅

订阅专栏

来源：https://blog.csdn.net/codingnoob/article/details/78683835

有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总，一起看看吧

有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总，一起看看吧。

一、load事件

 
         <script type= 
         "text/javascript" 
         > 
        
         $( 
         'img' 
         ).onload =  
         function 
         () { 
        
         //code 
        
         } 
        
         </script>

优点：简单易用，不影响HTML代码。

缺点：只能指定一个元素，javascipt代码必须置于图片元素的下方

二、jquery方法

 
         <script type= 
         "text/javascript" 
         > 
        
         $( 
         function 
         (){ 
        
         $( 
         '.pic1' 
         ).each( 
         function 
         () { 
        
         $( 
         this 
         ).load( 
         function 
         (){ 
        
         $( 
         this 
         ).fadeIn(); 
        
         }); 
        
         }); 
        
         }) 
        
         </script>

注意，不要在$(document).ready()里绑定load事件。

优点：可以批量绑定元素事件，并且不影响HTML代码内容
缺点：需要jquery库的支持，代码需要放置到需要操作元素的下方。

三、readystatechange事件

 
         <!DOCTYPE HTML> 
        
         <html>  
        
         <head>  
        
         <meta charset= 
         "utf-" 
         > 
        
         <title>img - readystatechange event</title> 
        
         </head>  
        
         <body> 
        
         <img id= 
         "img" 
         src= 
         "http://pic.win.com/wallpaper/f/cbbaea.jpg" 
         > 
        
         <p id= 
         "p" 
         >loading...</p> 
        
         <script type= 
         "text/javascript" 
         > 
        
         img.onreadystatechange =  
         function 
         () { 
        
         if 
         (img.readyState== 
         "complete" 
         ||img.readyState== 
         "loaded" 
         ){  
        
         p.innerHTML =  
         'readystatechange:loaded' 
        
         } 
        
         } 
        
         </script> 
        
         </body> 
        
         </html>

readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。

四、img的complete属性

 
         <!DOCTYPE HTML> 
        
         <html>  
        
         <head>  
        
         <meta charset= 
         "utf-8" 
         > 
        
         <title>img - complete attribute</title> 
        
         </head>  
        
         <body> 
        
         <img id= 
         "img1" 
         src= 
         "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" 
         > 
        
         <p id= 
         "p1" 
         >loading...</p> 
        
         <script type= 
         "text/javascript" 
         > 
        
         function 
         imgLoad(img, callback) { 
        
         var 
         timer = setInterval( 
         function 
         () { 
        
         if 
         (img.complete) { 
        
         callback(img) 
        
         clearInterval(timer) 
        
         } 
        
         }, 50) 
        
         } 
        
         imgLoad(img1,  
         function 
         () { 
        
         p1.innerHTML( 
         '加载完毕' 
         ) 
        
         }) 
        
         </script> 
        
         </body> 
        
         </html>

轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。

以上内容是小编给大家介绍的JS判断图片是否加载完成方法汇总，希望对大家有所帮助，同时也非常感谢大家对脚本之家网站的支持！

var t_img; // 定时器
var isLoad = true; // 控制变量

// 判断图片加载状况，加载完成后回调
isImgLoad(function(){
    // 加载完成
});

// 判断图片加载的函数
function isImgLoad(callback){
    // 注意我的图片类名都是cover，因为我只需要处理cover。其它图片可以不管。
    // 查找所有封面图，迭代处理
    $('.cover').each(function(){
        // 找到为0就将isLoad设为false，并退出each
        if(this.height === 0){
            isLoad = false;
            return false;
        }
    });
    // 为true，没有发现为0的。加载完毕
    if(isLoad){
        clearTimeout(t_img); // 清除定时器
        // 回调函数
        callback();
    // 为false，因为找到了没有加载完成的图，将调用定时器递归
    }else{
        isLoad = true;
        t_img = setTimeout(function(){
            isImgLoad(callback); // 递归扫描
        },500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
    }
}

修炼到救赎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript & jquery完美判断图片是否加载完毕

来源：https://blog.csdn.net/codingnoob/article/details/78683835有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总，一起看看吧有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总，一起看看吧。一、load事件?12...
复制链接

扫一扫

专栏目录