Событие загрузки JQuery на изображениях

Question

Я хочу изменить размер родительского изображения с тем же размером изображения, когда загружаются изображения.

В это время я использую этот код:

$(window).load(function(){ 
    $('.image-principale').each(function(){ 
     $(this).parent().css('height', $(this).height()); 
    }); 
}); 

это работает, за исключением того, чем он работает только тогда, когда каждый изображение загружается. Я попытался добавить обработчик нагрузки к каждому изображению напрямую, но они не запускаются.

Что случилось?

Спасибо!

Answer 1

работает для меня: http://jsbin.com/ululo/edit

$(function(){ 
    $("img").load(function(){ 
    $(this).parent().height($(this).height()); 
    }); 
}); 

Answer 2

Попробуйте следующее:

...Your HTML... 

<script type="text/javascript"> 
    $('.image-principale').load(function(){ 
     $(this).parent().css('height', $(this).height()); 
    }); 
</script> 

Обратите внимание, что сценарий должен быть помещен после HTML, или он будет работать, прежде чем существуют <img> элементы и не будет на самом деле ничего не делать.

Вы также можете попробовать использовать live, например:

$('.image-principale').live('load', function(){ 
    $(this).parent().css('height', $(this).height()); 
}); 

Однако, я не знаю, будет ли это на самом деле работает.

Answer 3

В документе готовы легко:

$(function() { 
    $('.image-principale').load(function(){ 
    $(this).parent().css('height', $(this).height()); 
    }); 
}); 

или даже:

$(function() { 
    $('.image-principale').live('load', function(){ 
    $(this).parent().css('height', $(this).height()); 
    }); 
}); 

снаружи или внутри ready().

Answer 4

$ ('img'). Нагрузка, похоже, срабатывает при каждом изменении размера изображения. В моем случае это делает мой сайт медленным. (Я пробовал это на FF)

Answer 5

В принципе, вы хотите прослушивать события загрузки или readystatechange из элемента img.

Так что вам нужно сделать, это:

$(window).load(function(){ 
    $('.image-principale img').on("load readystatechange", function(){ 
     // Here you can check whether it state complete by checking 
     // if(this.complete || (this.readyState == 'complete' && e.type == 'readystatechange')) { } 
     $(this).parent().css('height', $(this).height()); 
    }); 
}); 

... Но этот способ имеет несколько (большие) предостережений. А именно, что он не будет «всегда» работать, и он не будет работать с изображениями «кеш» (иногда). Наилучший способ - это на самом деле степень вышеприведенного кода (который будет проверять некоторые дополнительные условия, которые достаточно сложно проверить) из библиотеки Desadro, которая называется jquery.imagesLoaded

Он будет проверять наличие событий и другие условия (например, сломанные изображения, кешированные изображения, загруженный элемент, ...) и дает вам обратную связь при загрузке ВСЕХ элементов.

Реализуется это (вы можете видеть больше на сайте):

// Loading script 
var dfd = $('#my-container').imagesLoaded(function($images, $proper, $broken){ 
    //Here you can do a loop on $proper that is the list of images that properly loaded. 
}); // save a deferred object and use dfd later 

Вы также можете иметь для каждого изображения, загруженного, обратного вызова:

dfd.progress(function(isBroken, $images, $proper, $broken){ }); 

Я совершенно уверен, что это будет решите ваш (очень старый ... извините) проблема. Я размещаю его здесь, так как это может помочь некоторым другим людям.