使用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");
    });
});

我无法想象如何在div中的图像加载完成后（即load返回html后），将#info更改为其他内容。是否有一种方法可以做到这一点？

- SeanJA

Answer 1

这正是您需要的。我在工作中经常使用它来加载巨大的地图，非常易于使用。 http://jqueryfordesigners.com/image-loading/

- Mark

---

这个答案现在已经没有用了，因为链接已经失效。 你应该添加一个简短的描述来说明解决方案。 - tousif

Answer 2

我喜欢使用类来控制背景图形式的加载/完成 gif。

此外，你的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>

- Lance Rushing

---

可能吧，我只是从中删除了一堆内容，以便传达要点。 - SeanJA

这段代码中的回调函数Lance Rushing仍然会在插入的图片完全加载之前执行。 ;) - trusktr

Answer 3

回调函数正在检查是否返回内容 - 这意味着标记已经返回。您需要进行不同的检查来查看图像是否已下载。

您需要枚举HTML中的图像，并检查它们是否已加载。

也许一个解决方案是获取图像的数量，并在每次图像加载时使用.load回调函数递增一个加载计数器。当加载计数与图像计数相匹配时，所有内容都准备好了。

看起来这可能对您有所帮助：

使用JQuery等待图像加载

编辑

这是一个在FF中工作的解决方案。不确定这是否是最佳方法，或者在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);


        };

- ScottE

Answer 4

我从另一个论坛上的一些代码中改编了这个非常简单的函数。它包括回调函数，供您在图像加载完成后使用。

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.

- wilsonpage

---

哇，太酷了，那几乎和我的函数一模一样。看看我的答案。嘿嘿。 - trusktr

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

}

巧合的是，它几乎与pagewil的答案完全相同，但这是我自己想出来的。;D

在将内容.load()到容器后，请使用此函数。

e.g.:

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

- trusktr