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/>-->

预加载图片以通过网址链接更改CSS背景

4 个答案: