Question

您好以下代码是寻找丢失的图像，删除包含＆lt;李＆GT;元素，然后运行轮播插件。

这在Firefox，Chrome等没有任何问题，但似乎卡在8和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加载和错误事件中的startCarousel没有定义。在刷新时，页面被缓存并加载得更快，因此定义了方法。

要对此进行测试，您是否可以将$('img').load和.error放入$(function(){声明中？我意识到这可能不是你想要最终结果......但我想在给出任何其他具体答案之前看看我的预感是否正确。

Answer 2

编辑2：

google search列出了许多有关如何检测丢失图像并将其删除的页面。甚至还有一个StackOverflow question。基本前提是使用.error function。 您在发布的脚本中已经在做什么。 因此，不需要依赖.load（）。 .error的文档没有列出任何警告，也没有任何人发布任何最近的实现问题...

编辑1：

基于jquery的旋转木马的随意谷歌搜索引领我到这一个...... http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm

看看这个小提琴。 http://jsfiddle.net/yvE2c/ ...它使用你的图像，简单的html和真正简单的轮播初始化...它也适用于IE7-9浏览器模式......除非你明确需要.load功能用于其他东西，考虑使用这个或其他一些简单易用的旋转木马......

我在IE9中查看了您的测试页面。将浏览器呈现模式从IE7切换到IE9。它在任何浏览器模式下都没有在第一次运行时工作。即使在第一次运行之后，一旦图像被缓存，如果你一个接一个地刷新多次，它就不能始终如一地开始......我不确定是什么问题，但是阅读jquery documentation for the .load()我注意到了以下comment

不知道Gecko，但至少   在Opera .load（）中不会触发   已经存在的图像   浏览器的缓存...写一些东西   像

$（ “＃myImg”）。一个（ “负载”，函数（）{   //做某事}）。each（function（）{   如果（this.complete）   $（本）.trigger（ “加载”）; }）;

似乎解决了这个问题。

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

文档还列出了以下警告

使用时加载事件的注意事项   带图像

开发人员尝试的常见挑战   解决使用.load（）快捷方式的问题   在图像时执行功能   （或图像集合）   完全装满了。有几个   这应该是已知的警告   指出。这些是：
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache

您可能想找到另一种方式来启动旋转木马...

jquery不会运行，直到我刷新页面，即8-9

2 个答案: