在刷新页面之前，jquery不会运行，例如8-9

Question

在下面的代码中，查找丢失的图像，删除包含< li>元素的内容，然后运行一个carousel插件。

这在firefox，chrome等浏览器中运行没有任何问题，但在IE8和9 (7似乎可以工作)中似乎被卡住了，直到我刷新页面。

一个示例页面是http://www.owenarchitects.co.uk/project_010.php

我使用的代码是

$(function(){

  var startCarousel, imgCount = $('img').length;

  startCarousel = function() {
    if (imgCount === 0) {

      $("div.foo").carousel(); // TODO adjust this to match the way you start your carousel

    }
  }  

  $('img').load(function() {
    imgCount--;
    startCarousel();
  })

  .error(function() {
    imgCount--;
    $(this).parent().remove();
    startCarousel();
  }); 
}); 

谢谢!

Answer 1

这听起来好像不起作用，因为img load和error事件中的startCarousel只有在页面加载之后才会被定义。在刷新时，页面被缓存和加载的速度更快，所以方法就是这样定义的。

为了测试这一点，你能把你的$('img').load和.error放在$(function(){声明中吗？我意识到这可能不是你想要的结果..但我想先看看我的直觉是否正确，然后再给出其他具体的答案。

Answer 2

编辑2：

google search列出了许多页面，说明如何检测丢失的图像并将其删除。甚至有一个StackOverflow question也可以做到这一点。基本前提是使用.error function。，这是您在发布的脚本中已经在做的事情。所以，不需要依赖于.load()。.error的文档没有列出任何警告，也没有人发布任何关于其实现的最新问题……

编辑1：

在谷歌上随意搜索一下基于jquery的carousel，我就找到了这个……http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm

看看这把小提琴。http://jsfiddle.net/yvE2c/ ...它使用你的图片，简单的html和一个真正简单的carousel初始化…它也可以在IE7-9浏览器模式下工作...除非您显式地将.load功能用于其他用途，否则可以考虑使用这个或其他一些简单易用的carousel ...

我在IE9中看了你的测试页面。已将浏览器渲染模式从IE7切换到IE9。它在任何浏览器模式下的第一次运行都不起作用。即使在第一次运行之后，一旦图像被缓存，如果你一个接一个地刷新多次，它也不会一致地启动……我不太确定问题出在哪里，但在阅读jquery documentation for the .load()时，我注意到了以下comment

Opera并不了解Gecko，但至少在

中，.load()方法不会对浏览器缓存中已经存在的图像触发……写一些类似的东西

$("#myImg").one("load"，function(){ //做点什么}) .each(function(){ if(this.complete) $(this).trigger("load")；})；

似乎解决了这个问题。

其他用户对此评论的回应似乎表明这是一个主要问题。您可能想要添加此修复程序，并查看您的轮播是否正确启动...

该文档还列出了以下注意事项

与图像一起使用时load事件的

注意事项

开发人员试图使用.load()快捷方式解决的一个常见挑战是，在图像(或图像集合)完全加载后执行函数。对于这一点，有几个已知的警告值得注意。它们是：

它既不能持续工作，也不能跨浏览器可靠地工作它在WebKit中不能正确启动如果图像源设置为与以前相同的src它不能正确地冒泡DOM树可以停止对已经存在于浏览器缓存中的图像启动

你可能想找另一种方式开始你的旋转木马...