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中的图像加载完成后将#info更改为其他内容（在加载返回html之后发生）。有没有办法做到这一点？

Answer 1

这正是您所需要的。我一直在使用它来加载巨大的地图，它非常容易使用。

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

Answer 2

我喜欢使用类来通过background-image

来控制加载/完成的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>

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

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上。

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

使用jQuery.load（'url.html'）插入图像后加载图像

5 个答案: