Question

我有一个简单的问题，但我无法找到一个干净的答案。我需要在ajax调用后加载大量图像，并且我想使用动画gif作为预加载器。我使用以下代码：

function loadProducts(url) {
    $("#loading").show();
    $('#inner').fadeOut(1).load(url + ' .product-list', function() {
        $('#inner').fadeIn(1000, function() {
            $("#loading").hide();
        });
    });
}

加载HTML .load(url + ' .product-list'时，#loading正在隐藏。问题是沉重的图像仍然在屏幕上呈现，我想继续显示动画.gif，直到图像的渲染完成。有没有办法知道屏幕上的图像何时被渲染？提前谢谢。

Answer 1

您可以使用promises检查所有图像何时加载，然后删除加载gif。

这会创建一个在图像加载后解析的承诺，所有承诺都保存在一个数组中，并且当所有承诺都被解析后，即所有图像都被加载时，回调就会触发。

function loadProducts(url) {
    $("#loading").show();

    $('#inner').fadeOut(1).load(url + ' .product-list', function() {

        var promises = [];

        $('#inner').find('img').each(function(_, image) {
            var img = new Image(), 
                def = new $.Deferred();

            img.onload = function() {
                def.resolve();
            }

            promises.push( def.promise() );

            img.src = image.src;
            if (img.complete) img.onload();
        });

        $.when.apply(undefined, promises).done(function() {

            $('#inner').fadeIn(1000, function() {
                $("#loading").hide();
            });

        });
    });
}

Answer 2

您可以使用ImagesLoaded

样本用法

imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});

Answer 3

您可以尝试使用Image对象。 E.g：

function loadImage(url) {
  $("#loading").show();
  var img = new Image();
  img.src = url;
  img.onload = function(e) {
      $("#loading").hide();
      //ur code to append/show the image
  };
}

Answer 4

可以将加载器作为类添加/删除吗？我有基础64encoded装载机，所以没有预装载机需要。这也使用闭包来让计数器记住它的值。

var imgDiv = document.getElementById("imgDiv");
imgDiv.onclick = (function () {
    "use strict";
    var count = 0;     // init the count to 0
    return function () {
        count++;       //count
        if (count === 1) {    // do something on first click
            $('.img-loader-content').addClass('loader');
            $('.imgDiv').load("images/img.jpg", function () {
                $('.img-loader-content').removeClass('loader');
            });
        }
        if (count > 1) {
            $('.imgDiv').slideToggle(400);
        }
    };
})
();

Answer 5

最常用的方法是使用onLoad，所以基本上在成功调用ajax之后，调用另一个调用成功函数：

http://www.w3schools.com/jsref/event_onload.asp

onload最常用于元素中以执行a 一旦网页完全加载了所有内容（包括图像，脚本文件，CSS文件等。）。

或使用这样的原生解决方案：

<img src="w3javascript.gif" onload="loadImage()">

http://www.w3schools.com/jsref/event_img_onload.asp

此问题的最后答案在您的案例中非常有用：

Is there something similar to `$(window).load();` for executing a function after newly inserted Ajax content has finished loading?

Answer 6

您可以通过ajaxComplete回调轻松完成，此处查看示例http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxcomplete

在ajax回调后隐藏加载gif

6 个答案:

样本用法