Question

问题 - 在运行时我正在使用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**"">

请告诉我任何解决方案如何实现这一目标。

Answer 1

我相信你可以使用Load event。

类似的东西：

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

Here is a working example

Here is an example with delayed loading

Answer 2

$('#imgId').load(function(){
alert('Image Loaded')
});

Answer 3

除了musefan的回答，如果你需要它来处理缓存的图像，你需要的东西超过load()

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

查看jQuery event for images loaded了解详情。

Answer 4

此代码会挂钩您在网站上使用“preload”类获得的每张图片。

$(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");
    });
});

检查图像已使用jquery加载

4 个答案: