javascript - 在 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

在您尝试设置该元素的 src 之前，IE 需要为图像定义 onload 事件。。所有其他浏览器都会处理得很好； 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);