javascript - poner - codigo html para cambiar imagenes automaticamente

Precarga de imágenes en safari para cambio de imagen de fondo

Question

Esta pregunta ya tiene una respuesta aquí:

• Precarga de imágenes con jQuery 20 respuestas
• Precargar imagen de fondo 6 respuestas

Tengo un fondo que cambia cada 12 segundos. En Chrome, Firefox y Opera, el cambio de fondo funciona bien, pero en Safari el navegador siempre carga la imagen de nuevo y se nota al parpadear cada cambio de imagen en el primer ciclo. Alguna idea sobre cómo puedo resolver este problema.

Así es como estoy manejando el cambio de fondo:

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)

Las clases de css:

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

}
.header-2.bg3 {

}

Answer 1

Si cambia el fondo después de un evento de carga en la imagen, asegúrese de que la imagen esté completamente cargada antes de actualizar cualquier elemento de la página.

Este enfoque agrega el evento y mantiene los cambios de fondo en 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>

También puede usar el mismo método con su código en el que usa CSS para controlar partes de él. Aquí acabo de establecer un atributo data-bg en su intervalo, luego controlo la background-image (y cualquier otra cosa) a través de CSS usando el selector de datos

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>

Answer 2

esto posiblemente se debe a que las imágenes no se cargan correctamente antes de que se ejecute el script llamando a la función onload () hará el truco.