Question

我正在使用jQuery在用户点击链接时动态加载内容。内容只是一堆图像，然后设置为以各种幻灯片形式显示。我的问题是，我似乎无法找到一种只在图像完全加载后显示加载内容的方法。我已经尝试了几种不同的解决方案，所有这些解决方案似乎要么打破脚本，要么就是不按我想要的方式工作。这是我现在使用的代码：

$(document).ready(function() {

$("a#item").click( function() {

   var projectName = $(this).attr('class');

   $("div.slideshow").css("display", "block");

   $("div.slideshow").load(projectName+".php", function() {

        var slideshow = new Array();

        $("div.slideshow img").each(function() {
            slideshow.push($(this));
        });

        startSlideshow(slideshow.shift());

        function startSlideshow(image) {
            image.delay(400).fadeIn(150, function() {
                if(slideshow.length > 0) {startSlideshow(slideshow.shift());}
                else { $("div.slideshow").delay(400).fadeOut(200, function() {$("div.slideshow img").css("display", "none")}); }

            });
        }
   });

   return false;

});

});

您还可以在此处查看完整的演示网站：http://publicprofileproject.com/

非常感谢任何输入！

Answer 1

您可以在JavaScript中创建一个图像对象数组，将每个图像加载到数组的元素中。将事件处理程序附加到图像的onLoad事件。

在事件处理程序中，增加已加载图像的数量。当您的计数器达到阵列的长度时，浏览器将拥有所有图像。您可以在此处显示幻灯片。

如果您在页面加载中执行此操作，则可以在用户点击链接时预先加载图片。

Answer 2

我相信这个问题已经回答here。

一般的想法是指定一个加载事件处理程序，以便在指定源属性之前显示它。

或者，如果您的projects+".php"文件指定了现成的html标记中的图像，那么您应该能够捕获正在加载的文件中图像的加载事件。将以下伪代码添加到正在加载的文件中。

$("img").load(function() {
    // show the div on the page it is getting loaded into
    alert("images should be loaded now");
});

您可以将其放在原始代码段中，并可能使用live / on绑定事件绑定它。例如：$("img").on("load", function() {...

来自load documentation：

当加载事件和所有子元素已完全加载时，会将事件发送到元素。此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。

修改：对您正在做的事情表示有趣的劝阻：

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行函数。应该注意有几个已知的警告。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

使用ajax加载html，但隐藏内容直到加载

2 个答案: