有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。
一、load事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - load event</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
img1.onload = function() {
p1.innerHTML = 'loaded'
}
</script>
</body>
</html>
测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件。
二、readystatechange事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - readystatechange event</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
img1.onreadystatechange = function() {
if(img1.readyState=="complete"||img1.readyState=="loaded"){
p1.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则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
相关推荐
JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded.
以下是使用onload事件判断图片加载完成的示例代码： ```html (this)" src="" style='display:none'/> <script type="text/javascript"> function get(ts) { ts.style.display='block'; // 显示图片 } ``` **...
因此，我们需要一种方法来判断WebBrowser控件是否已经完成了页面的最终加载。下面我们将详细探讨如何实现这个功能。 首先，WebBrowser控件提供了一个`DocumentCompleted`事件，当控件加载完一个文档时，这个事件会...
以下详细知识点涵盖了如何用JavaScript判断图片是否存在，以及实现这一功能的具体代码示例。 ### JavaScript检测图片是否存在 JavaScript提供了一种机制来处理图片加载失败的情况。当图片无法加载时，可以通过`...
为了精确判断WebBrowser是否加载完成，我们需要跟踪所有的`OnDocumentComplete`事件，直到所有子框架也都加载完毕。下面是一个简单的实现方法： 1. 在Delphi中创建一个新的VCL Forms应用程序。 2. 在Form上添加一个...
在这种情况下，可能需要采取其他策略来判断图片是否已经被缓存并决定如何处理。 以上就是使用JavaScript获取图片实际尺寸的基本方法和注意事项。通过理解这些知识点，我们可以在Web开发中更加灵活和准确地处理图片...
JavaScript提供了几种不同的方法来判断图片是否已经完全加载，这些方法各有优缺点。接下来，我们将详细讨论三种常见的实现方式。 首先，最直接的方法是使用img元素的load事件。当图片成功加载到浏览器中时，会触发...
本篇知识分享将向你介绍如何使用JavaScript来判断图片是否加载完成，以及相关的几种方法及其优缺点。 首先，最直接的方式是利用img标签自带的onload事件。onload事件会在图片完全加载完成后触发，我们可以在这个...
在JavaScript中，正确判断图片是否加载完成是网页动态加载和展示图片时不可或缺的技能。这个问题在Web开发中经常遇到，特别是在处理用户上传的图片或远程图片资源时。本篇文章将详细探讨如何通过JavaScript来实现这...
以上三种方法都可以用来判断图片是否已经加载完成。它们各有优缺点，但都是浏览器提供的标准方式，因此我们可以放心使用。需要注意的是，在现代的前端开发中，图片资源通常都会进行预加载，这样可以提高用户体验，...
本文将介绍四种常用的方法来判断图片是否加载完成。 1. **load事件** load事件是JavaScript中最直接的方式，当图片加载完成后触发。例如： ```javascript var img = document.querySelector('img'); img.onload...
在JavaScript中，判断图片是否已经加载完毕是网页动态加载和处理图片时常见的需求。这有助于确保图片完全显示或执行依赖于图片加载完成的其他操作。以下是一些常用的方法，适用于不同的浏览器环境： 1. **onload...
JS文件则包含了实际的懒加载逻辑，包括滚动事件监听、判断图片是否在视口以及加载图片的功能。可能还会包含一些额外的功能，比如防抖动处理（debounce）或节流（throttle）来减少滚动事件的频繁触发，提高性能。 ...
在JavaScript中，判断图片是否加载完成以及获取图片的宽度是前端开发中常见的需求。这主要应用于处理用户上传图片时可能出现的布局问题，如图片加载不完全导致页面元素尺寸异常。以下将详细介绍两种常用的方法。 ##...
3. **判断图片是否进入视口**：基于计算出的图片位置，我们可以判断图片是否在视口内。如果图片的顶部已经进入视口或者即将进入视口（例如，距离视口顶部的距离小于图片高度的一半），则认为图片应该被加载。 4. **...
这篇文章将介绍几种常见的JS实现判断图片是否加载完成的方法，这些方法有助于优化用户体验，特别是对于那些依赖大量图片的网页。 1. **onload事件** `onload`事件是在元素（如`<img>`）的资源加载完成后触发的。...
### JavaScript实现图片加载完成监听 在JavaScript中，我们可以利用Image对象的`onload`事件来实现图片加载完成的监听。当图片加载完成时，`onload`事件会被触发，此时我们就可以执行需要在图片加载完成后执行的...
尤其是在使用JavaScript和jQuery动态加载图片时，若不能准确判断图片是否加载完成，可能会导致页面布局错误或JavaScript程序出错。因此，本文详细探讨了如何使用JavaScript和jQuery来判断图片是否已经成功加载。 ...
在JavaScript中，可以通过监听document对象的readyState属性变化来判断页面是否加载完毕。readyState属性用于描述当前文档的加载状态，有以下几种值： - loading：页面正在加载中。 - interactive：页面已经完成DOM...
2. 实现机制：主要通过监听滚动事件，判断图片是否进入可视区域来触发加载。图片元素通常会有一个备用的占位符（例如一个小尺寸的透明图片或简单的边框），在真实图片加载之前显示。 二、JavaScript实现步骤 1. ...