Событие загрузки JQuery для изображений - PullRequest
Новая
       7

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

2 голосов
/ 01 февраля 2010

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

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

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

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

Что не так?

Спасибо!

Ответы [ 5 ]

5 голосов
/ 01 февраля 2010

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

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

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

2 голосов
/ 10 июля 2012

По сути, вы хотите прослушивать события загрузки или 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());
    });
});

Но ... таким образом, есть несколько (больших) предостережений. А именно, он не будет работать «всегда» и не будет работать с «кэшированными» изображениями (иногда). На самом деле лучший способ - это расширение приведенного выше кода (который проверит еще несколько условий, которые довольно сложно проверить) из Desandro, библиотеки с именем 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 ){ });

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

2 голосов
/ 01 февраля 2010

На документе готово легко: 

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

или даже: 

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

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

1 голос
/ 02 марта 2010

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

1 голос
/ 01 февраля 2010

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

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