2

当用户单击链接时，我正在使用 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/

任何投入将不胜感激！

4

2 回答 2

2

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

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

如果您在页面加载中执行此操作，它将具有额外的优势，即在用户单击您的链接时预加载图像。

于 2012-04-24T19:11:15.913 回答
1

我相信这个问题已经在这里得到了回答。

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

或者，如果您的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() {...

从加载文档：

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

编辑：做看起来像你正在做的事情有趣的沮丧：

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

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

  • 它不能始终如一地工作，也不能可靠地跨浏览器
  • 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
  • 它没有正确地冒泡 DOM 树
  • 可以停止对已经存在于浏览器缓存中的图像进行触发
于 2012-04-24T19:11:26.193 回答