如何使用Javascript / jQuery确定图像是否已加载? [英] How can I determine if an image has loaded, using Javascript/jQuery?
问题描述
我正在编写一些Javascript来调整大图像的大小以适应用户的浏览器窗口。 (遗憾的是,我无法控制源图像的大小。)
I'm writing some Javascript to resize the large image to fit into the user's browser window. (I don't control the size of the source images unfortunately.)
所以这样的内容将出现在HTML中:
So something like this would be in the HTML:
<img id="photo"
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
我有办法确定 src
已下载 img
标记中的图片?
Is there a way for me to determine if the src
image in an img
tag has been downloaded?
我需要这个因为如果在浏览器加载图像之前执行 $(document).ready()
,我就遇到了问题。 $(#photo)。width()
和 $(#photo)。height()
将返回占位符的大小(替代文本)。在我的情况下,这是像134 x 20。
I need this because I'm running into a problem if $(document).ready()
is executed before the browser has loaded the image. $("#photo").width()
and $("#photo").height()
will return the size of the placeholder (the alt text). In my case this is something like 134 x 20.
现在我只是检查照片的高度是否小于150,并假设如果是这样的话它只是替代文字。但这是一个非常黑的,如果一张照片的高度小于150像素(在我的特定情况下不太可能),或者如果替代文字高度超过150像素(可能发生在一个小的浏览器窗口上),它就会破裂。
Right now I'm just checking if the photo's height is less than 150, and assuming that if so it is just alt text. But this is quite a hack, and it would break if a photo is less than 150 pixels tall (not likely in my particular case), or if the alt text is more than 150 pixels tall (could possibly happen on a small browser window).
编辑:对于想要查看代码的人:
For anyone wanting to see the code:
$(function()
{
var REAL_WIDTH = $("#photo").width();
var REAL_HEIGHT = $("#photo").height();
$(window).resize(adjust_photo_size);
adjust_photo_size();
function adjust_photo_size()
{
if(REAL_HEIGHT < 150)
{
REAL_WIDTH = $("#photo").width();
REAL_HEIGHT = $("#photo").height();
if(REAL_HEIGHT < 150)
{
//image not loaded.. try again in a quarter-second
setTimeout(adjust_photo_size, 250);
return;
}
}
var new_width = . . . ;
var new_height = . . . ;
$("#photo").width(Math.round(new_width));
$("#photo").height(Math.round(new_height));
}
});
更新:谢谢建议。如果我为 $(#photo)。load
事件设置回调,则存在未触发事件的风险,因此我直接在onLoad上定义了一个onLoad事件图片标签。为了记录,这里是我最终得到的代码:
Update: Thanks for the suggestions. There is a risk of the event not being fired if I set a callback for the $("#photo").load
event, so I have defined an onLoad event directly on the image tag. For the record, here is the code I ended up going with:
<img id="photo"
onload="photoLoaded();"
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
然后在Javascript中:
Then in Javascript:
//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
isPhotoLoaded = true;
}
$(function()
{
//Hides scrollbars, so we can resize properly. Set with JS instead of
// CSS so that page doesn't break with JS disabled.
$("body").css("overflow", "hidden");
var REAL_WIDTH = -1;
var REAL_HEIGHT = -1;
$(window).resize(adjust_photo_size);
adjust_photo_size();
function adjust_photo_size()
{
if(!isPhotoLoaded)
{
//image not loaded.. try again in a quarter-second
setTimeout(adjust_photo_size, 250);
return;
}
else if(REAL_WIDTH < 0)
{
//first time in this function since photo loaded
REAL_WIDTH = $("#photo").width();
REAL_HEIGHT = $("#photo").height();
}
var new_width = . . . ;
var new_height = . . . ;
$("#photo").width(Math.round(new_width));
$("#photo").height(Math.round(new_height));
}
});
推荐答案
添加事件监听器,或者让图像公布本身与onload。然后从那里找出尺寸。
Either add an event listener, or have the image announce itself with onload. Then figure out the dimensions from there.
<img id="photo"
onload='loaded(this.id)'
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
这篇关于如何使用Javascript / jQuery确定图像是否已加载?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!