jquery 预加载背景图像

ltskdhd1 于 2023-04-05 发布在 jQuery

关注(0)|答案(4)|浏览(114)

我在javascript/jQuery中循环浏览背景图像，就像这样...

var duration = 2500;
var delay = 500;
var i = 0;

setInterval(function() {

  if (i == 0) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");
  }

  if (i == 1) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");
  }

  if (i == 2) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");
  }

  if (i == 3) {
    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");
  }

  i++;

}, duration + delay)

.myimage {
  height: 500px;
  width: 500px;
  transition: background-image 1s linear;
  background-image: url('https://placeimg.com/1648/1488/any');
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>

问题是，我偶尔会出现没有图像的 Flink ，我想这是因为图像没有及时加载。有没有办法预加载它们？

jquery

来源：https://stackoverflow.com/questions/53431876/preload-background-images

4条答案

按热度按时间

wqlqzqxt1#

您可以使用CSS预加载它们，如：

body::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}

**注意：**您可以在JS代码中使用图像数组，并根据索引i更改它们。

x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-04-05

yzuktlbb2#

您可以按以下方式预加载图像

function preloadImages(){

var images = ["https://placeimg.com/1640/1480/any","https://placeimg.com/1640/1481/any","https://placeimg.com/1640/1482/any","https://placeimg.com/1640/1483/any"];
var preloadedImages = [];

for(i=0;i<images.length;i++){

  preloadedImages[i] = new Image();
  preloadedImages[i].src = images[i];
  console.log(preloadedImages[i].src)
}

}

preloadImages();

图像预加载后，您可以使用您的代码，而不是

"url('https://placeimg.com/1640/1480/any')")

您使用

"url("+preloadedImages1.src+")")

这通常会导致您的图像已经加载并正确显示。

赞(0）回复(0）举报 2023-04-05

jgzswidk3#

第一次，浏览器需要下载所有的图像，一旦下载，它将从缓存加载。
因此，每次浏览器下载文件时，都会出现无图像的 Flink 。您有两种选择
1.您正在遵循的方法（这是确定的）
1.使用CSS技巧加载所有一次使用以下代码
.myimage { height: 500px; width: 500px; transition: background-image 1s linear; background-image: url('https://placeimg.com/1648/1480/any'); background-image: url('https://placeimg.com/1648/1481/any'); background-image: url('https://placeimg.com/1648/1482/any'); background-image: url('https://placeimg.com/1648/1483/any'); background-size: cover; }

赞(0）回复(0）举报 2023-04-05

2uluyalo4#

一旦浏览器加载它，它不会被重新加载所有的时间。第二次呈现相同的图像不会有这样的问题
使用i= i==3?0:++i使图像循环。而不是仅使用i++Fiddle

赞(0）回复(0）举报 2023-04-05