Выяснить, когда изображения загружаются после их вставки, используя jQuery.load ('url.html').

Question

У меня сейчас что-то похожее на это, он загружает div на целевой странице, на которой есть изображения.

$('a.galleryNext').click(function(){
    // chnage the image to loading
    $("#info").html("LOADING");
    $("#currentGal").load("gallery.php div#gallery"+currentgallery, function(){
        //this fires much too early, the images are still loading...
        $("#info").html("DONE");
    });
});

Что я не могу понять, так это как изменить #info на что-то еще после того, как изображения в div завершены, загрузка (что происходит после того, как загрузка возвращает html). Есть ли способ сделать это?

Answer 1

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

http://jqueryfordesigners.com/image-loading/

Answer 2

Мне нравится использовать классы для управления загрузкой / выполненным GIF с помощью background-image

Также ваш синтаксис load () отключен. см .: http://docs.jquery.com/Ajax/load

<style>

.done { background-image:done.gif; }
.loading { background-image:loading.gif; }

</style>
<script>
    $('a.galleryNext').click(function(){

        $("#info").addClass("loading");
        $("#info").removeClass("done");
        $("#currentGal").load("gallery.php", null, function(){

            $("#info").removeClass("loading");
            $("#info").addClass("done");
        });
    });
</script>

<div id="currentGal"></div>
<div id="info"></div>

Answer 3

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

function imgsLoaded(el,f){
  var imgs = el.find('img');
  var num_imgs = imgs.length;

  if(num_imgs > 0){
    imgs.load(function(){
      num_imgs--;
      if(num_imgs == 0) {
        if(typeof f == "function")f();//custom callback
      }
    });
  }else{
    if(typeof f == "function")f();//custom callback
  }
}

ИСПОЛЬЗОВАНИЕ:

imgsLoaded($('#container'),function(){

//stuff to do after imgs have loaded

});

Надеюсь, это поможет!

W.

Answer 4

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

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

Возможно, решением было бы получить число изображений и увеличивать счетчик загрузки при каждой загрузке изображения, используя функцию обратного вызова .load Когда загруженное количество соответствует количеству изображений, тогда все содержимое готово.

Похоже, это может вам помочь:

Ожидание загрузки изображений с помощью JQuery

EDIT

Вот рабочее решение, в ФФ. Не уверен, что это лучший способ или как он работает в IE, но вы поняли.

        var $images = $("#somediv img");
        if ($images.length) {

            var imageCount = $images.length;
            var imageLoadedCount = 0;

            $images.each(function() {
                $(this).load(function() {
                    imageLoadedCount += 1;
                });
            });

            var intervalId = setInterval(function() {
                if (imageCount == imageLoadedCount) {
                    //console.log("all loaded");
                    clearInterval(intervalId);
                };
            }, 200);


        };

Answer 5

Вот функция, которую я только что придумал:

function when_images_loaded($img_container, callback) { //do callback when images in $img_container are loaded. Only works when ALL images in $img_container are newly inserted images.
    var img_length = $img_container.find('img').length,
        img_load_cntr = 0;

    if (img_length) { //if the $img_container contains new images.
        $('img').load(function() { //then we avoid the callback until images are loaded
            img_load_cntr++;
            if (img_load_cntr == img_length) {
                callback();
            }
        });
    }
    else { //otherwise just do the main callback action if there's no images in $img_container.
        callback();
    }

}

По совпадению, это почти идентично ответу Пейджвил, но я придумал свой самостоятельно. ; D

Используйте эту функцию после загрузки содержимого .load () в контейнер.

например:.

$("#foobar").load("gallery.php", null, function(){
    when_images_loaded($("#foobar"), function(){
        $("#info").removeClass("loading");
        $("#info").addClass("done");
    });
});