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

我使用jQuery在用户单击链接时动态加载内容。内容只是一堆图像，然后设置为以各种幻灯片形式显示。我的问题是，我似乎无法找到一种方式来显示加载的内容只有在图像完全加载后。我尝试了几种不同的解决方案，他们都似乎要么破坏脚本，要么就是不按我想要的方式工作。以下是我现在使用的代码：使用ajax加载html，但隐藏内容直到加载

$(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/

任何投入将不胜感激！

来源

2012-04-24 Chris

找到一个插件来预先载入图像的图像。它可能会帮助你 – chepe263 2012-04-24 18:58:40

想法：创建一个额外的隐藏div（显示：无）并插入img – chepe263 2012-04-24 19:03:16

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

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

如果在页面加载时执行此操作，则会在用户单击链接时预加载图像，从而提供额外的优势。

来源

2012-04-24 19:11:15

我想我明白你在说什么。我认为我的问题是，我在同一页面上有几个不同的“幻灯片”，每个用户点击链接时都会触发。我仍然可以为每个单独的链接使用计数器吗？如果您需要查看该页面，我会在原始帖子中添加一个链接到正在运行的示例。感谢你的回答！ – Chris 2012-04-24 19:34:54

您可以在用户点击链接时执行此操作，但您无法获得预加载的优势。 – 2012-04-24 20:01:26

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

总体思路是指定一个加载事件处理程序，以在指定source属性之前显示它。

或者，如果您的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（）快捷方式是在图像（或图像集合）完全加载时执行一个函数。有几个已知的警告与此应该注意。它们是：

这并不一致，也不可靠地工作，跨浏览器的

它不正确的WebKit如果图像的src设置为相同的SRC像以前

它不火正确地泡了DOM树

可以停止火已经生活在浏览器的缓存

来源

2012-04-24 19:11:26 veeTrain

这个解决方案在处理html时是否也可以工作？我在这个例子中看到它是一个图片网址。 – Chris 2012-04-24 19:30:36

@paperbeatsscissors;我用你的另一种可能性更新了我的答案。我的选择器比你的可能应该更模糊 - 你也许可以把这个捕获事件放在原来的javascript中。 – veeTrain 2012-04-24 19:33:39

太棒了，我还没有试过“on”选项。我尝试将装入事件绑定到幻灯片的开始处，但它变得非常不稳定，并且在项目列表的中间保持淡出。虽然，我完全有可能把它放在错误的地方...... – Chris 2012-04-24 19:44:42

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

回答

相关问题