javascript - Skrollr 图像闪烁。 Firefox 预加载问题

Question

我正在使用 Skrollr 开发“翻页书式”动画，当用户滚动到页面上的指定位置时触发背景图像变化。我遇到的问题是，在浏览器中，图像更改被延迟，从而产生只能定义为帧之间白色“闪烁”的内容。

<div class="section" style="background: url('frame1.png')"
data-560-top="background-image:!url('frame1.png');" 
data-440-top="background-image:!url('frame2.png');">

HTML 很简单；它基本上指出，在距 div 顶部 560 像素(相对于浏览器窗口)处，背景应位于第 1 帧，然后当用户滚动靠近 div(距 div 顶部 440 像素)时，背景应位于第 1 帧。背景图像更改为第 2 帧。我计划使用最多 20 帧左右，并且图像相当大。

我创建了一个JSBin here其中包括一个非常简化的示例，其中包含来自 placehold.it 的图像。这包括 Skrollr 脚本和我的项目的一部分的示例布局。主要区别在于我的项目中的图像尺寸更大。

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  };
})(jQuery);

jQuery.preLoadImages(
    'http://www.placehold.it/300x200.png',
    'http://www.placehold.it/300x200.png'
);

上面的代码片段似乎可以在 Chrome 上运行，但在 Firefox 中仍然存在闪烁问题。根据研究，Firefox 处理缓存图像的方式与 Chrome 不同？ (例如，如果 Firefox 在给定时间认为图像不需要，则该图像会被丢弃？)

我想知道如何强制所有浏览器有效地预加载图像，以避免背景图像在更改时闪烁。我对 Javascript/JQuery 还很陌生。

我希望我已经提供了明确的解释。感谢所有帮助。

丹

Answer 1

仅使用 CSS 即可预加载图像，无需使用 JS。查看this article了解更多信息。另一种有趣的方法是在文章的评论部分。基本上，您将背景图像分配给伪元素，以便将其缓存并随时可供使用。请参阅此代码的示例:

#something:before {
     content: url("./img.jpg");
     width:0;
     height:0;
     visibility:hidden;
}