浏览器如何知道是否加载了图像？
[英]How does the browser know if an image is loaded?
问题描述
I need to have a function called after a larger image is loaded on the page. 
在页面上加载较大的图像后，我需要调用一个函数。 I've tried some various solutions that I've found on here and around the web, but none either fit or work. 我尝试了一些在这里和网络上找到的各种解决方案，但都不合适或无法使用。 Here's what I've tried that seems to make the most sense...and this is using jQuery 这是我尝试过的最有意义的方法...这是使用jQuery
var imgs = $('#bgStage img.bg'),
imgCnt = imgs.length,
cnt = 0;
imgs.load(function () {
cnt++;
if (imgCnt === cnt) {
homeSlider();
}
}).each(function () {
if (this.complete) {
$(this).trigger('load');
}
});
This doesn't seem to wait until the img.bg is loaded. 这似乎并没有等到img.bg被加载。 The homeSlider() function is called and started as I still see the image still loading. 当我仍然看到图像仍在加载时，将调用并启动homeSlider（）函数。
So, I am wondering how a browser determines an image is loaded? 因此，我想知道浏览器如何确定图像已加载？ Is it when it can read the width and height? 可以读取宽度和高度吗？ Because I am defining the width and height in the CSS for the image to force it to be a certain size. 因为我要在CSS中定义图像的宽度和高度，以将其强制为一定大小。
If anyone has any insight as to what makes the onload event fire for an image, that'd be great! 如果有人对导致onload事件触发图像有任何见解，那就太好了！ Thanks. 谢谢。
5 个解决方案
解决方案1
0 2010-09-27 15:15:19
您可以随时检查$（'img'）。length（）;
解决方案2
0 2010-09-27 15:24:03
Here's a sample code that should work. 这是应该工作的示例代码。 I did a project that needed this and I remember that some problems might include: 我做了一个需要此项目的项目，并且我记得一些问题可能包括：
- The browser caches the image (IE i believe) so I had to append ?[random] at the end 浏览器缓存图像（我相信是IE），因此我必须在末尾附加？[random]
- Maybe you have to set the src javascriptly so that your event is hooked at the right time 也许您必须使用JavaScript设置src，以便在正确的时间挂起事件
Sample code: 样例代码：
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#imageSample')
.load(function(){
alert($('#imageSample').width());
alert($('#imageSample').height());
})
.attr('src', 'http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg?' + new Date());
});
</script>
<style type="text/css"></style>
</head>
<body>
<img id="imageSample" src="" alt="" />
</body>
</html>
解决方案3
0 2010-09-27 15:26:55
图片可能会被缓存，请尝试以下操作： http : //github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
解决方案4
0 2010-09-27 15:27:30
Use something simple like so: 使用类似以下的简单内容：
var loaded = false;
var len = $('#bgStage img.bg'), c = 0;
$('#bgStage img.bg').each(function(){
$(this).attr('src',$(this).attr('src') + new Date()); //Remove caching.
$(this).bind('onload',function(){
//Other Stuff here!
if(c == len)
{
HomeSlider();
}
c++; //Increment
});
});
Tell me how it goes :) 告诉我怎么了:)
解决方案5
0 2010-09-27 18:52:06
Each image has a complete property. 每个图像都有一个完整的属性。 Unfortunately not all browsers support it. 不幸的是，并非所有浏览器都支持它。 They always report true, even if the image hasn't loaded at all. 即使图像完全没有加载，它们也始终报告为true。 IE gets it right. IE浏览器正确。 ;-) ;-)
http://simon.html5.org/test/html/semantics/img/src/ (not mine) http://simon.html5.org/test/html/semantics/img/src/ （不是我的）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.