预加载图像以从URL链接更改CSS背景

Question

我正在从我的未飞溅集合（ https://unsplash.com/collections/3132360/dashboard ）加载图像，并更改了主体的背景图像（通过CSS）。 可以，但是更改会有延迟。 有没有一种方法可以预加载图像，甚至可以淡入/淡出它们？

我已经尝试过JavaScript的新Image（），但这是针对HTML图像而不是CSS。

提前致谢 ：）

这是jQuery：

$('document').ready(function(){
  var x = 0;
  loadImage(x);
});

function loadImage(x) {
  x +=1;
  var image = 'https://source.unsplash.com/collection/3132360/1920x1080#'+x;

  setTimeout(function() {
    imgSwap(image, x);
  }, 30000)
}

function imgSwap(image, x){
  $('body').css('background-image', 'url(' + image + ')');
  loadImage(x);
}

Answer 1

您可以在CSS中将默认图像添加到人体样式中以显示预加载图像。

body{
  background-image: url("http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif");
  background-repeat: no-repeat;
}

https://jsfiddle.net/nimittshah/cwpdsnLy/

Answer 2

现在可以使用img.src作为CSS的背景URL来更新此更新的代码，从而根据需要刷新图像。 仅使用image变量作为URL。

$('document').ready(function(){
  var x = 0;
  loadImage(x);
});

function loadImage(x) {
  x +=1;
  var image = new Image()
  image.src = 'https://source.unsplash.com/collection/3132360/1920x1080#'+x;

  setTimeout(function() {
    imgSwap(image, x);
  }, 30000)
}

function imgSwap(image, x) {
  $('body').css('background-image', 'url(' + image.src + ')');
  loadImage(x);
}

Answer 3

我认为，如果您可以包括以下javascript代码和CSS，则可以完全填充您要实现的功能

 function preloader() { if (document.getElementById) { document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px"; document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px"; document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px"; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader); 

 #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; } #preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; } 

Answer 4

 var x = 0; $('document').ready(function(){ loadImage(x); }); function loadImage(x) { setInterval(function() { var randomId = new Date().getTime(); var image = 'https://source.unsplash.com/collection/3132360/1920x1080#'+x+'?r='+randomId; console.log("x="+x + " " + image); imgSwap(image); x +=1; }, 30000) } function imgSwap(image){ $('body').css('background-image', 'url(' + image + ')'); //$('#bg_img').attr('src', image); } 

 You can change value of x randomly, but i have found your img provider is not returning the images plz check this first, It is redirecting to some other url <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!--<img id="bg_img" src="" width=400 height=400/>-->