`

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

 
阅读更多

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

 

一、load事件

Html代码  收藏代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>img - load event</title>  
  6. </head>  
  7. <body>  
  8.     <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">  
  9.     <p id="p1">loading...</p>  
  10.     <script type="text/javascript">  
  11.         img1.onload = function() {  
  12.             p1.innerHTML = 'loaded'  
  13.         }  
  14.     </script>  
  15. </body>  
  16. </html>  

测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件。

 

二、readystatechange事件

Html代码  收藏代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>img - readystatechange event</title>  
  6. </head>  
  7. <body>  
  8.     <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">  
  9.     <p id="p1">loading...</p>  
  10.     <script type="text/javascript">  
  11.         img1.onreadystatechange = function() {  
  12.             if(img1.readyState=="complete"||img1.readyState=="loaded"){  
  13.                 p1.innerHTML = 'readystatechange:loaded'  
  14.             }  
  15.         }  
  16.     </script>  
  17. </body>  
  18. </html>  

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

 

三、img的complete属性

Html代码  收藏代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>img - complete attribute</title>  
  6. </head>  
  7. <body>  
  8.     <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">  
  9.     <p id="p1">loading...</p>  
  10.     <script type="text/javascript">  
  11.         function imgLoad(img, callback) {  
  12.             var timer = setInterval(function() {  
  13.                 if (img.complete) {  
  14.                     callback(img)  
  15.                     clearInterval(timer)  
  16.                 }  
  17.             }, 50)  
  18.         }  
  19.         imgLoad(img1, function() {  
  20.             p1.innerHTML('加载完毕')  
  21.         })  
  22.     </script>  
  23. </body>  
  24. </html>  

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



 

 

分享到：
| Spring MVC与struts比较
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded.

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

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

    C#判断webbrowser页面最终加载完成

    因此，我们需要一种方法来判断WebBrowser控件是否已经完成了页面的最终加载。下面我们将详细探讨如何实现这个功能。 首先，WebBrowser控件提供了一个`DocumentCompleted`事件，当控件加载完一个文档时，这个事件会...

    精确判断webbrowser是否加载完成demo(delphi)

    为了精确判断WebBrowser是否加载完成，我们需要跟踪所有的`OnDocumentComplete`事件，直到所有子框架也都加载完毕。下面是一个简单的实现方法： 1. 在Delphi中创建一个新的VCL Forms应用程序。 2. 在Form上添加一个...

    用Javascript判断图片是否存在，不存在则显示默认图片的代码

    以下详细知识点涵盖了如何用JavaScript判断图片是否存在，以及实现这一功能的具体代码示例。 ### JavaScript检测图片是否存在 JavaScript提供了一种机制来处理图片加载失败的情况。当图片无法加载时，可以通过`...

    js判断图片加载完成后获取图片实际宽高的方法

    在这种情况下，可能需要采取其他策略来判断图片是否已经被缓存并决定如何处理。 以上就是使用JavaScript获取图片实际尺寸的基本方法和注意事项。通过理解这些知识点，我们可以在Web开发中更加灵活和准确地处理图片...

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

    JavaScript提供了几种不同的方法来判断图片是否已经完全加载，这些方法各有优缺点。接下来，我们将详细讨论三种常见的实现方式。 首先，最直接的方法是使用img元素的load事件。当图片成功加载到浏览器中时，会触发...

    javascript判断图片是否加载完成的方法推荐

    本篇知识分享将向你介绍如何使用JavaScript来判断图片是否加载完成，以及相关的几种方法及其优缺点。 首先，最直接的方式是利用img标签自带的onload事件。onload事件会在图片完全加载完成后触发，我们可以在这个...

    如何基于JavaScript判断图片是否加载完成

    在JavaScript中，正确判断图片是否加载完成是网页动态加载和展示图片时不可或缺的技能。这个问题在Web开发中经常遇到，特别是在处理用户上传的图片或远程图片资源时。本篇文章将详细探讨如何通过JavaScript来实现这...

    JavaScript怎么判断图片是否加载完成以便获取其尺寸

    以上三种方法都可以用来判断图片是否已经加载完成。它们各有优缺点，但都是浏览器提供的标准方式，因此我们可以放心使用。需要注意的是，在现代的前端开发中，图片资源通常都会进行预加载，这样可以提高用户体验，...

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

    本文将介绍四种常用的方法来判断图片是否加载完成。 1. **load事件** load事件是JavaScript中最直接的方式，当图片加载完成后触发。例如： ```javascript var img = document.querySelector('img'); img.onload...

    JavaScript判断图片是否已经加载完毕的方法汇总

    在JavaScript中，判断图片是否已经加载完毕是网页动态加载和处理图片时常见的需求。这有助于确保图片完全显示或执行依赖于图片加载完成的其他操作。以下是一些常用的方法，适用于不同的浏览器环境： 1. **onload...

    JavaScript实现图片懒加载 图片懒加载是一种在页面加载时，延迟加载图片资源的技术，也就是说图片资源在需要的时候才会加载

    JS文件则包含了实际的懒加载逻辑，包括滚动事件监听、判断图片是否在视口以及加载图片的功能。可能还会包含一些额外的功能，比如防抖动处理（debounce）或节流（throttle）来减少滚动事件的频繁触发，提高性能。 ...

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

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

    【JavaScript】图片延迟加载方案2

    3. **判断图片是否进入视口**：基于计算出的图片位置，我们可以判断图片是否在视口内。如果图片的顶部已经进入视口或者即将进入视口（例如，距离视口顶部的距离小于图片高度的一半），则认为图片应该被加载。 4. **...

    JS实现判断图片是否加载完成的方法分析

    这篇文章将介绍几种常见的JS实现判断图片是否加载完成的方法，这些方法有助于优化用户体验，特别是对于那些依赖大量图片的网页。 1. **onload事件** `onload`事件是在元素（如`&lt;img&gt;`）的资源加载完成后触发的。...

    js或者jquery判断图片是否加载完成实现代码

    ### JavaScript实现图片加载完成监听 在JavaScript中，我们可以利用Image对象的`onload`事件来实现图片加载完成的监听。当图片加载完成时，`onload`事件会被触发，此时我们就可以执行需要在图片加载完成后执行的...

    JavaScript & jQuery完美判断图片是否加载完毕

    尤其是在使用JavaScript和jQuery动态加载图片时，若不能准确判断图片是否加载完成，可能会导致页面布局错误或JavaScript程序出错。因此，本文详细探讨了如何使用JavaScript和jQuery来判断图片是否已经成功加载。 ...

    javascript页面加载完执行事件代码

    在JavaScript中，可以通过监听document对象的readyState属性变化来判断页面是否加载完毕。readyState属性用于描述当前文档的加载状态，有以下几种值： - loading：页面正在加载中。 - interactive：页面已经完成DOM...

    【JavaScript】图片延迟加载方案1

    2. 实现机制：主要通过监听滚动事件，判断图片是否进入可视区域来触发加载。图片元素通常会有一个备用的占位符（例如一个小尺寸的透明图片或简单的边框），在真实图片加载之前显示。 二、JavaScript实现步骤 1. ...

Magicbox
Global site tag (gtag.js) - Google Analytics