How to change the CSS after image lazy loading (jQuery)? [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 7 years ago.

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);
 });

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.

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

回答1:

You can use .load()

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

http://jsfiddle.net/TYufy/4/ - example using .load()

回答2:

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.

来源：https://stackoverflow.com/questions/12451641/how-to-change-the-css-after-image-lazy-loading-jquery