如何更改图片延迟加载(jQuery)后的CSS？

Question

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

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

当用户单击缩略图时，将执行以下代码：

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

每个大图都必须将CSS "height"设置为"auto"，并将"width"设置为"100%"，因为我正在进行响应式/流畅布局。上面的代码从"data-original"属性获取其"src"属性值。但是在本例中，在替换属性之后，"height: auto"和"width:100%"被设置为600ms。这不起作用，因为我使用的是Isotope jQuery插件(http://isotope.metafizzy.co/)，而这个插件需要元素的实际宽度和高度来正确定位网格。如果在加载图像的过程中设置了"height: auto"和"width:100%"，则插件会丢失，并使元素的位置不正确。

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

Answer 1

好吧，我找到了解决方案:有一个叫做imagesLoaded的小型jQuery插件。在所有选中的子镜像加载完成后触发回调。问题是你不能在缓存的图像上做.load()。

Answer 2

您可以使用.load()

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

http://jsfiddle.net/TYufy/4/ -使用.load()的示例