Question

好吧，这听起来像一个奇怪的问题，但我使用jquery来制作一个ajax请求，所以我可以预加载一堆图像，然后我想在一切都被加载后显示所有图像。当请求正在制作有一个动画加载器gif，位于页面上。

我有以下代码，它会生成ajax请求并加载像它应该的图像。我从来没有看到动画GIF，我不确定它是否只是加载速度如此之快，或者某些东西不能正常工作。此外，一旦ajax成功，它仍然看起来像图像需要加载，它们不只是弹出，看起来它们仍在加载。

这就是我正在使用的：

var load_gallery = function(){
    var images = $.ajax({
        type : "POST",
        url: "/index.php/main/get_images",
        success: function(html){
            $("#gallery-images").html(html);
            $("#image-loader-animation").addClass('hide');
            $('#cat-selector-all').addClass('link-selected');               
        }
    });
}

以上假设要等到该ajax请求中的所有内容加载然后显示在页面上？如果没有，有没有办法我可以制作ajax请求并等待所有内容完全加载后再显示全部并隐藏加载程序gif。

基本上是一个懒惰的装载程序。

由于

编辑：我更新它以使用.load，它似乎仍然有同样的问题...不确定这是否正确：

var load_gallery = function(){
    $("#gallery-images").load('/index.php/main/get_images', function () {
        $("#gallery-images").show();
        $("#image-loader-animation").addClass('hide');
        $('#cat-selector-all').addClass('link-selected');
    });

}

编辑：这是请求......可能是因为我现在使用占位符作为图像？

    <div class="site gallery-webdev">
    <div class="image">
        <img src="http://placekitten.com/1000/700" />
    </div>
    <div class="description">
    asdf
    </div>
</div>
<div class="site gallery-webdev">
    <div class="image">
        <img src="http://flickholdr.com/1000/700" />
    </div>
    <div class="description">
    asdf
    </div>
</div>
<div class="site gallery-seo">
    <div class="image">
        <img src="http://lorempixum.com/1000/700/0" />
    </div>
    <div class="description">
    asdf
    </div>
</div>
<div class="site gallery-fd">
    <div class="image">
        <img src="http://placedog.com/1000/700" />
    </div>
    <div class="description">
    asdf
    </div>
</div>
<div class="site">
    <div class="image">
        <img src="http://placekitten.com/1000/700" />
    </div>
    <div class="description">
    asdf
    </div>
</div>

Answer 1

只有在您的AJAX请求成功时才会调用success函数。

如果您正在使用本地计算机，请求很快。也可以尝试服务器上的脚本。

解决您的问题：您能告诉我们您的要求吗？我认为你只加载部分，而不是图像本身。

Answer 2

你ajax只获取html并将其放入你想要的div中。这不是加载图像，因为在将它们放在页面上或创建javascript Image对象之前，服务器不会请求它们。请尝试使用此plugin。我获取Image.onload并为加载的图像创建事件。我不久前在一个项目中使用它进行延迟加载，它运行得很好。

至于微调器，让你在ajax / image请求之前创建它，并且一旦所有东西都竞争（无论是成功还是有错误），它们都会删除它。

Answer 3

您可以将.load事件附加到div，以便在加载所有内容时获取回调。这应该适合你：

$("#gallery-images").load(function () {
    $("#gallery-images").show();
});

请注意，我假设您想要的不是完成AJAX请求（这是您进入成功回调函数时会发生的事情），而是您希望加载其他内容然后让您知道何时加载（这不是AJAX）。

这个ajax请求实际上做了什么吗？

3 个答案: