0

问题 - 在运行时，我正在使用 jquery 更改/替换某些图像的 src 属性。这些图像默认是隐藏的。我想在这些图像下载并准备显示时显示这些图像，因为有些图像也可能无法下载。

         <img id="pic_1" width="153" height="160" border="0" 
                onmouseout="this.style.border='2px solid #FFFFFF';"
                   onmouseover="this.style.border='2px solid #4585E7';" 
                                       style="visibility: hidden;" 
                                        src="**to be replaced at run time**"">

请让我知道任何解决方案如何实现这一目标。

4

4 回答 4

2

我相信你可以使用这个Load事件。

就像是：

$('#myImage').load(function() {
  //called when image is loaded
});

这是一个工作示例

这是延迟加载的示例

于 2013-04-25T10:33:43.733 回答
1 
$('#imgId').load(function(){
alert('Image Loaded')
});
于 2013-04-25T10:35:02.520 回答
1

除了 musefan 的回答之外，如果您还需要它来处理缓存的图像，那么您需要的不仅仅是load()

检查https://github.com/desandro/imagesloaded。它是一个 jQuery 插件，当图像被加载时触发回调。它也适用于缓存的图像。

检查jQuery 事件以获取更多信息。

于 2013-04-25T10:38:01.410 回答
0

此代码将使用“预加载”类与您在网站上获得的每张图片挂钩。

$(function(){
    //Hide all pictures first (You could here work on some loading animations if you want)
    $("img.preload").css("display", "none");

    //When the image is loaded, show it again
    $("img.preload").load(function(){
        $(this).css("display", "block");
    });
});
于 2013-04-25T10:44:48.453 回答