在 safari 上预加载图像以更改背景图像 [重复]

Posted 2023-05-07

【中文标题】在 safari 上预加载图像以更改背景图像 [重复]

【英文标题】：Preloading images on safari for background image change [duplicate]

【发布时间】：2017-08-03 10:04:58

【问题描述】：

我有一个每 12 秒更改一次的背景。 在 Chrome、Firefox 和 Opera 中，背景更改工作正常，但在 Safari 中，浏览器总是再次加载图像，并且在第一个周期的每个图像更改时都会出现闪烁。关于如何解决这个问题的任何想法。

这就是我处理背景变化的方式：

var img2 = new Image();
var img3 = new Image();
img2.src="/img/bg2.png";
img3.src="/img/bg3.png";
Meteor.setInterval(function()
    let elem = $(".header-2");
    if(elem.hasClass("bg1"))
        elem.removeClass("bg1");
        elem.addClass("bg2");
        let src = 'url('+img2.src.replace(location.origin,'')+')';
        elem.css("background-image", src);
    
    else if(elem.hasClass("bg2"))
        elem.removeClass("bg2");
        elem.addClass("bg3");
        let src = 'url('+img3.src.replace(location.origin,'')+')';
        elem.css("background-image", src);
    
    else
        elem.removeClass("bg3");
        elem.addClass("bg1");
    
, 12*1000)

css 类：

.header-2.bg1 
    background-image: url('/img/bg1.png');

.header-2.bg2 


.header-2.bg3 

【问题讨论】：

不是在计时器滴答时更改图像的src，而是可以有几个元素，每个元素都加载了它的图像，然后更改z-index 以将你想要的元素放在前面想？如果图像具有透明度，您可以通过将其不透明度设置为零来使隐藏元素不可见。

【参考方案1】：

在图像上发生onload 事件后更改背景应确保在更新页面上的任何内容之前完全加载图像。

这种方式在JS中添加事件并保持背景变化。

var bgs = ['http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg', 'http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg','http://www.mrwallpaper.com/wallpapers/Huge-Bear.jpg'],
  count = 1,
  header2 = document.getElementsByClassName('header-2')[0];

setInterval(function() 
  var img2 = new Image(),
    url = bgs[count];
  img2.onload = function() 
    header2.style.backgroundImage = 'url(' + url + ')';
  
  img2.src = url;
  (count < (bgs.length - 1)) ? count++ : count = 0;
,1000)

body 
  margin: 0;

.header-2 
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  margin: 0;
  background-image: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header-2"></header>

您也可以在代码中使用相同的方法来控制部分代码。在这里，我只是在您的区间中设置了一个data-bg 属性，然后使用数据选择器通过 CSS 控制background-image（以及其他任何东西）

var bgs = ['http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg', 'http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg', 'http://www.mrwallpaper.com/wallpapers/Huge-Bear.jpg'],
  count = 0,
  header2 = document.getElementsByClassName('header-2')[0];

setInterval(function() 

  var img2 = new Image(),
      url = bgs[count];

  img2.onload = function() 
    header2.setAttribute('data-bg', count);
  

  img2.src = url;

  (count < (bgs.length - 1)) ? count++ : count = 0;
, 1000)

body 
  margin: 0;

.header-2 
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  margin: 0;
  background-image: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg');

.header-2[data-bg="1"] 
  background-image: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg');

.header-2[data-bg="2"] 
  background-image: url('http://www.mrwallpaper.com/wallpapers/Huge-Bear.jpg');

<header class="header-2" ></header>

【参考方案2】：

这可能是由于在执行脚本之前图像未正确加载，通过调用函数 onload() 可以解决问题。