1

我遇到了以下问题：用户单击缩略图后，会通过延迟加载加载更大的图像并打开。加载更大图像的代码是：

<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%"因为我正在制作响应式/流体布局。上面的代码"src"从属性中获取它的属性值"data-original"。但是"height: auto"，"width:100%"在本例中设置为600ms在属性进行替换之后。这不起作用，因为我为此使用了 Isotope jQuery 插件（http://isotope.metafizzy.co/），并且该插件需要元素的实际宽度和高度才能正确定位网格。在加载图像期间设置"height: auto"和"width:100%"时，插件会丢失并使元素位置不正确。

那么如何在图像加载后对其进行编码以设置这两个 CSS 属性呢？

4

2 回答 2

1

您可以使用.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()

于 2012-09-16T23:51:28.707 回答
0

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

于 2012-09-17T01:32:18.800 回答