您的位置:首页 > Web前端 > javascript > 正文

判断图片是否加载完成

更多 时间:2014-12-26 类别:Web前端 浏览量:1383

判断图片是否加载完成

判断图片是否加载完成

一、load事件

通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显示的,通过onload判断加载完成后再将图片显示出来。

  •  
  • HTML 代码   复制
  • 
    <img class="pic1" onload="get(this)" src="..." style='display:none' />
     
    <script type="text/javascript">
    function get(ts){
        ts.style.display = 'block';  //显示图片
    }
    </script>
    
    
    		
  •  

     

    二、jquery方法

    为每个class为pic1的图片元素绑定事件,通过jquery的load方法,将元素渐现出来。

  •  
  • HTML 代码   复制
  • 
    <script type="text/javascript">
    $(function(){
        $('.pic1').each(function() {
            $(this).load(function(){
                $(this).fadeIn();
            });
        });
    })
    </script>
    
    		
  •  

    三、img的complete属性

  •  
  • HTML 代码   复制
  • 
    
    <!DOCTYPE HTML>
    
    <html> 
    
    <head> 
    
        <meta charset="utf-8">
    
        <title>img - complete attribute</title>
    
    </head> 
    
    <body>
    
        <img id="img1" src="">
    
        <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则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。

     

    标签:图片加载