如何在图像延迟加载（jQuery）后更改CSS？ [英] How to change the CSS after image lazy loading (jQuery)?

问题描述

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

I've got the following problem: after the user clicks on a thumbnail image, a bigger image is loaded with lazy loading and opens up. The code to load the bigger image is:

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

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

When the user clicks on a thumbnail image, the following code is executed:

$("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％丢失，并使位置的元素不正确。

Each big image has to have the CSS "height" set to "auto", and the "width" set to "100%" because I am making a responsive/fluid layout. The above code gets its "src" attribute value from the "data-original" attribute. But "height: auto" and "width:100%" are set in this example to 600ms after the attributes do their replacing. This doesn't work, because I am using Isotope jQuery plugin (http://isotope.metafizzy.co/) for this and this plugin needs the real width and height of the element to position the grid properly. When "height: auto" and "width:100%" are set during the loading of an image, the plugin gets lost and makes positions the elements incorrectly.

那么如何在图片加载后设置这两个CSS属性呢？

So how do code this to set those 2 CSS properties after the image has loaded?

推荐答案

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

Well, I found the solution: there is a small jQuery plugin, called imagesLoaded. It triggers a callback after all the selected child images have been loaded. The problem was that you can't do .load() on cached images.

这篇关于如何在图像延迟加载（jQuery）后更改CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！