js 判断图片是否加载完

最新推荐文章于 2021-04-27 09:24:37 发布
最新推荐文章于 2021-04-27 09:24:37 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： js jquery 文章标签： js load
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wem520/article/details/31755285
版权
js 同时被 2 个专栏收录
24 篇文章 0 订阅
订阅专栏
jquery
6 篇文章 0 订阅
订阅专栏 
function loadImage(url, callback) {
	var img = new Image(); //创建一个Image对象，实现图片的预下载
	img.src = url;
	
	if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
	    callback.call(img);
	    return; // 直接返回，不用再处理onload事件
    }
	img.onload = function () { //图片下载完毕时异步调用callback函数。
        callback.call(img);//将回调函数的this替换为Image对象
    };
};

</pre><pre code_snippet_id="395795" snippet_file_name="blog_20140617_3_4709132" name="code" class="html"><pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>判断图片是否加载完成</title>

</head>
<body>
<img id="img2" src="images/1.jpg" />
</body>
</html>
<script language="JavaScript">
    document.getElementById("img2").onload = function () {
        alert("图片加载已完成");
    }
</script>


 


 

                

        

        

    

  


    

      

        

            

              
                
                  wem520
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
[JavaScript]判断图片是否加载完毕

				
			

			

				

					DaftJayee的博客
				

				

					08-17
					
					612
					
				

			

		

		

			
				
<body>
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" id="img">
    <script>
        //判断图片加载完毕
        var img=document.getElementById("img");
        var timer=setInterval(function(){
                if(img.complete){


			
		

	



                

              
                



	

		

			

				
					
怎么 判断图片是否加载完成

				
			

			

				

					老虎帅呆了的博客
				

				

					12-05
					
					2556
					
				

			

		

		

			
				
有时候我们在前端开发工作中为了获取图片的信息，需要在图片加载完成后才可以正确的获取到图片的大小尺寸，并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的jquery判断图片加载完成时的方法


今天来看下如何判断所有的图片加载完成，而在加载完成之前可以使用 loading 的 gif 图表示正在加载中。

一、普通方法


监听 img 的 load 方法，每 l

			
		

	



                


  
              

                


	

		

			

				
					
判断图片是否加载完成的js插件

				
			

			

				

					04-21
				

			

		

		

			
				
JavaScript is all like "You images done yet or what?"

imagesloaded.desandro.com

Detect when images have been loaded.

			
		

	





	

		

			

				
					
JavaScript判断图片是否加载完成的三种方式

				
			

			

				

					weixin_33810006的博客
				

				

					05-03
					
					217
					
				

			

		

		

			
				
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。
 
一、load事件

&lt;!DOCTYPE HTML&gt;
&lt;html&gt; 
&lt;head&gt; 
	&lt;meta charset="utf-8"&gt;
	&lt;title&gt;img - load event&lt;/title&gt;
&lt;

			
		

	



		

			
		



	

		

			

				
					
js判断图片是否加载完成

				
			

			

				

					deerforest的博客
				

				

					10-21
					
					650
					
				

			

		

		

			
				
Document


	onloading...

	
	
	
	var obj=new Image();
	obj.src="images/4.jpg";
	obj.onload=function(){
		document.getElementById("pic").innerHTML="";
		alert("图片加载完成");
	}
	
    
    
    <!--
    
  

			
		

	





	

		

			

				
					
js判断图片加载完成

				
			

			

				

					xinxin的博客
				

				

					09-06
					
					1157
					
				

			

		

		

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

一、load事件



$('img').onload = function() {
//code
}



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


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

二、jquery

			
		

	





	

		

			

				
					
js 判断图片是否加载完以及实现图片的预下载

				
			

			

				

					10-25
				

			

		

		

			
				
本文将详细介绍如何使用JavaScript判断图片是否加载完成以及如何实现图片的预下载。  首先，让我们来看一下如何判断图片是否加载完成。在HTML中，我们通常使用`<img>`标签来插入图片，并通过设置`src`属性指定图片的...

			
		

	





	

		

			

				
					
JavaScript实现判断图片是否加载完成的3种方法整理

				
			

			

				

					10-24
				

			

		

		

			
				
以下是使用onload事件判断图片加载完成的示例代码：  ```html (this)" src="" style='display:none'/> <script type="text/javascript">  function get(ts) {  ts.style.display='block'; // 显示图片  }  ```  **...

			
		

	





	

		

			

				
					
关于JS判断图片是否加载完成且获取图片宽度的方法

				
			

			

				

					10-27
				

			

		

		

			
				
在JavaScript中，判断图片是否加载完成以及获取图片的宽度是前端开发中常见的需求。这主要应用于处理用户上传图片时可能出现的布局问题，如图片加载不完全导致页面元素尺寸异常。以下将详细介绍两种常用的方法。  ##...

			
		

	





	

		

			

				
					
js监听某张图片是否加载完成，完成后再执行相应代码

				
			

			

				

					04-01
				

			

		

		

			
				
js监听某张图片是否加载完成，完成后再执行相应代码，亲测有效，图片加载完再执行相对应代码，让前面页面看起来更流畅

			
		

	





	

		

			

				
					
JS判断图片是否加载完成方法汇总(最新版)

				
			

			

				

					01-19
				

			

		

		

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


[removed]
$('img').onload = function() {
//code
}
[removed] 
优点：简单易用，不影响HTML代码。

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

二、jquery方法


[removed]
$(function(){
$('.pic1').each(function(

			
		

	





	

		

			

				
					
js或者jquery判断图片是否加载完成

				
			

			

				

					huobengluantiao8
				

				

					07-09
					
					420
					
				

			

		

		

			
				
网页中有时候需要获得图片的宽度和高度，来定义某些大小，可是这个是需要从服务端请求图片，下载到本地才能够得到的，有些js或者jquery代码在还没有加载完图片时就执行了。怎么办呢？
jquery提供一个方法：

$("").load(function(){...});

其中选择器是图片的id或class，function里面的方法就是回调函数，在图片加载完成后执行，但是我试验了很多，压根儿不...

			
		

	





	

		

			

				
					
JS判断图片是否加载完成

				
			

			

				

					liuhua_2323的博客
				

				

					02-24
					
					3485
					
				

			

		

		

			
				
我们经常需要获取图片的宽高，这需要在图片加载完成后才可以。

下面我就介绍几种判断图片是否加载完成的方法：

首先我们先写一个img标签


<img src="./img.png" alt="">

1.complete属性：


var imgNode = document.getElementsByTagName('img')[0];
var timer = setTimeout...

			
		

	





	

		

			

				
					
js判断图片有没有加载完成

				
			

			

				

					笑到世界都狼狈的博客
				

				

					04-27
					
					2205
					
				

			

		

		

			
				
项目中遇到一个需要等二维码加载出来之后，在执行一些请求的需求，在网上看到一些方法都是什么if(img.comlpete){}或者img.onload之类的方法，

但是我试了都没啥用，于是想到应该是页面一进去，图片(请求的服务器图片)还没有返回，就已经将if(img.comlpete){}执行完成，所以根本就进不去。

最后加了一个定时器，解决了这个问题，

代码如下：


var $pathWx = 'https://pics4.baidu.com/feed/03087bf40ad162d93da6bac

			
		

	





	

		

			

				
					
js 判断图片是否加载完成

				
			

			

				

					PrimaryColor
				

				

					12-25
					
					1217
					
				

			

		

		

			
				
js方法：


document.getElementById("#img").onload = function () {
    console.log("加载完成");
}

jquery：


$(".img")[0].onload = function () {
    console.log("加载完成");
}




			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值