Internet Explorer 中的递归图像延迟加载失败 (6-8)

Question

问题：

我无法在所有相关版本的 Internet Explorer 中实现递归图像延迟加载。我使用的是 jQuery 1.3.2，下面的代码在 Firefox、Safari 和 Chrome 上运行良好。

虽然我预计 IE6 的 javascript 引擎会阻塞，但我很惊讶地发现它在 IE7 上根本不起作用，而且在 IE8 上只是偶尔。它有时在 IE8 上工作令人沮丧，因为这似乎暗示如果我足够努力并在 Microsoft 脚本调试器中设置足够多的断点，我可能会在经过一番努力后让它工作。

我知道我不必递归地执行此操作，如果找不到合适的解决方案，我将重新实现它，但递归方法在此示例中特别适合，因为我希望图像一次加载一个，漂亮地连续加载。 （我预计最大深度约为 15）

我带着这个问题来到 StackOverflow，因为我过去遇到过类似的问题，想知道是否有人对问题可能有任何见解：

• jQuery 中的递归？
• IE[6-8] 的 javascript 引擎中的递归？
• IE[6-8] 中的错误 jQuery 回调/方法链接？
• 幼稚的实现？

代码：

这里是延迟加载函数：

jQuery.lazyLoadImages = function(imgSelector, recursive, fadeIn)
{
  var image = $(imgSelector);
  if (image.size()) {
    image.parents(SAH.imageContentSelector).addClass(SAH.loadingClass);
    // the img src attribute is stored in the alt attribute
    var imgSrc = image.attr('alt');
    image.attr('src', imgSrc).attr('alt','').load(function() {
      $(this)
      .removeClass(SAH.lazyLoadClass)
      .parents(SAH.imageContentSelector)
      .removeClass(SAH.loadingClass);
      if (fadeIn) $(this).fadeIn(SAH.lazyLoadDuration);
      if (recursive) {
        var nextPos = eval(parseInt(imgSelector.replace(/.*position-(\d+).*/,'$1')) + 1);
        var nextImage = imgSelector.replace(/position-(\d+)/,'position-' + nextPos);
        $.lazyLoadImages(nextImage, recursive, fadeIn);
      }
    });
    return true;
  } else {
    return false;
  }
}

---

SAH.* 变量只是存储在全局对象 SAH 中的变量。这是调用 $.lazyLoadImages() 的相关部分：

// fade the first image in with the navBar
var firstGalleryImageSelector = 'img#img-position-1-' + galleryId + '.' + SAH.lazyLoadClass;
$.lazyLoadImages(firstGalleryImageSelector,false,true);
navBar.show('slide', { direction: 'right' }, function() {
  // load the rest after the navBar callback
  $.lazyLoadImages(firstGalleryImageSelector.replace(/position-1/,'position-2'), true, true);
});

第一次调用 $.lazyLoadImages() 是非递归的；第二个是递归的，在导航栏滑入窗口后触发。

---

最后是相关的html：

<div id='position-1-i4design' class='content image' style='width:400px'>
  <div class='image-gallery'>
    <a class='local-x' href='#position-1-i4design'>
      <img alt='/images/press/i4design/i4design-1.jpg' id='img-position-1-i4design' class='lazy-load hide'>
    </a>
    ...
  </div>
  ...
</div>

<div id='position-2-i4design' class='content image' style='width:389px'>
  <div class='image-gallery'>
    <a class='local-x' href='#position-2-i4design'>
      <img alt='/images/press/i4design/i4design-2.jpg' id='img-position-2-i4design' class='lazy-load hide'>
    </a>
    ...
  </div>
  ...
</div>

<div id='position-3-i4design' class='content image' style='width:398px'>
  <div class='image-gallery'>
    <a class='local-x' href='#position-3-i4design'>
      <img alt='/images/press/i4design/i4design-3.jpg' id='img-position-3-i4design' class='lazy-load hide'>
    </a>
    ...
  </div>
  ...
</div>

...

Answer 1

IE 需要为图像定义 onload 事件在您尝试设置该元素的 src 之前。所有其他浏览器都会处理得很好； IE 会窒息。

由于这个原因，您上面的加载函数很可能永远不会运行。

试试这个：

   image.attr('alt','').load(function() {
      $(this)
      .removeClass(SAH.lazyLoadClass)
      .parents(SAH.imageContentSelector)
      .removeClass(SAH.loadingClass);
      if (fadeIn) $(this).fadeIn(SAH.lazyLoadDuration);
      if (recursive) {
        var nextPos = eval(parseInt(imgSelector.replace(/.*position-(\d+).*/,'$1')) + 1);
        var nextImage = imgSelector.replace(/position-(\d+)/,'position-' + nextPos);
        $.lazyLoadImages(nextImage, recursive, fadeIn);
      }
    }).attr('src', imgSrc);

Answer 2

我用递归 JavaScript 函数做了一些非常相似的事情来加载图像，这在 IE 中运行良好。

我能看到的主要区别是：

• 我使用的是普通的 JavaScript 函数，而不是 jQuery 函数。
• 我使用 jQuery 创建了每个图像并将其添加到相关容器中。

我不确定这两点是否重要，但仅查看您的代码，我猜测一些更昂贵的函数会引用图像的父母两次，并且还会淡入图像。

如果这些被注释掉，它会成功运行吗？