Question

我正在开发一个“翻书式”＆＃39;当用户滚动到页面上的指示位置时，通过触发背景图像更改使用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像素）时背景图像更改为第2帧。我计划使用最多约20帧，图像非常大。

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

＆＃13;

(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'
);

＆＃13;

以上代码段似乎在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;
}

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

1 个答案: