确定使用 jQuery.load('url.html') 插入图像后何时加载图像答案

【问题标题】：Figuring out when images are loaded after they are inserted using jQuery.load('url.html')确定使用 jQuery.load('url.html') 插入图像后何时加载图像
【发布时间】：2010-12-05 01:52:46
【问题描述】：

我目前有类似的东西，它在包含图像的目标页面上加载一个 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 中的图像完成加载后将 #info 更改为其他内容（这发生在加载返回 html 之后）。有没有办法做到这一点？

【问题讨论】：

标签： jquery ajax image

【解决方案1】：

这正是您所需要的。我在工作中一直使用它来加载巨大的地图，而且它真的很容易使用。

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

【讨论】：

这个答案现在没有用了，因为链接已损坏。您应该添加描述解决方案的简短描述

【解决方案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 仍会在插入的图像完全加载之前执行。 ;)

【解决方案3】：

回调正在检查是否返回了内容 - 意味着返回了标记。您必须进行其他检查以查看图像是否已下载。

您必须枚举 html 中的图像并检查它们是否已加载。

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

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

Waiting for images loading with 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);


        };

【讨论】：

【解决方案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.

【讨论】：

哇，酷，这几乎和我的功能一模一样。看我的回答。呵呵

【解决方案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() 内容到容器后使用这个函数。

例如：

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

【讨论】：