如何在图像延迟加载（jQuery）后更改CSS？

我遇到了以下问题：在用户单击缩略图图像后，一个较大的图像被延迟加载并打开。加载较大图像的代码为：

<img width="663" height="845" class="big" data-original="real/path/to/image" src="path/to/empty/small/picture">

每个大图像都必须将CSS

“高度”

设置为

“自动”

，

“宽度”

设置为

“100%”

，因为我正在制作一个响应性/流畅的布局。上述代码从

“原始数据”

属性获取其

“src”

属性值。但是在本例中，在属性进行替换后，将“高度：自动”和“宽度：100%”设置为

600ms

。这不起作用，因为我使用同位素jQuery插件（）来实现这一点，这个插件需要元素的真实宽度和高度来正确定位网格。加载图像时，如果设置了

“高度：自动”

和

“宽度：100%”

，插件将丢失，并使元素位置不正确

那么，在加载图像后，如何编写此代码来设置这两个CSS属性呢？

您可以使用

.load（）

-使用

.load（）

的示例您可以使用

.load（）

---

-示例使用

.load（）

我找到了解决方案：有一个小的jQuery插件，名为。它会在加载所有选定的子映像后触发回调。问题是你不能在缓存的图像上执行

.load（）

。

我找到了解决方案：有一个小的jQuery插件，名为。它会在加载所有选定的子映像后触发回调。问题是，你不能在缓存的图像上执行

.load（）

。

也许要等到插件完成它的工作，然后再设置维度？@Linas-我想你是对的。然而，插件所做的工作是基于维度的。但是你给了我一些想法-在插件中有一个函数-

$container.同位素（'relayat'）-重新显示整个网格。如果我能在图像加载后执行它，那么它就可以工作了。问题是，我不知道如何定义图像何时加载。也许等到插件完成它的工作，然后再设置尺寸？@Linas-我想你是对的。然而，插件所做的工作是基于维度的。但是你给了我一些想法-在插件中有一个函数-
$container.同位素（'relayat'）-重新显示整个网格。如果我能在图像加载后执行它，那么它就可以工作了。问题是，我不知道如何定义图像何时加载。我担心它不起作用。我想知道-替换属性是否被视为“加载”，因为“img.big”从一开始就存在于代码中？是的，它应该被视为加载。当您更改img的
src
时，浏览器需要加载它。用JS fiddle更新了答案。。1秒钟后图像会发生变化，恐怕无法正常工作。我想知道-替换属性是否被视为“加载”，因为“img.big”从一开始就存在于代码中？是的，它应该被视为加载。当您更改img的
src
时，浏览器需要加载它。用JS fiddle更新了答案。。图像在1秒后更改
$("img.thumb").click(function() 
 {      
    var $cont = $(this).siblings('.item-content').children('.big'); 
    $cont.attr('src', $cont.attr("data-original"));
    setTimeout(function(){
        $cont.css({'height': 'auto', 'width': '100%'});
    }, 600);
 });

$('img.big').load(function() {
    if($(this).attr('src') == $(this).attr('data-original')) {
        $(this).css({'height': 'auto', 'width': '100%'});
    }
});