Question

我正在使用以下脚本来显示div元素的背景图片。

问题在于图像每张大约1MB并且它们不会很快，因此背景效果可以很平滑。我在`$（window）.load（function（）{}）中包装函数;但它没有任何区别。

如何延迟背景图像下载，以便仅在下载所有图像时启动。

jQuery(function ($) {
  var body = $('.hmcarousel');
  var backgrounds = new Array(
    "url(soml_slider_1.jpg)",
    "url(soml_slider_2.jpg)",
    "url(soml_slider_3.jpg)",
    "url(soml_slider_4.jpg)",
    "url(soml_slider_5.jpg)"
  );
  var current = 0;
  function nextBackground() {
    body.css(
      'background',
      backgrounds[current = ++current % backgrounds.length]
    );
    setTimeout(nextBackground, 5000);
  }
  setTimeout(nextBackground, 5000);
  body.css('background', backgrounds[0]);
});

Answer 1

我相信您的问题的答案在this thread。

另一种选择是通过创建内存图像元素并将其src属性设置为原始图像的原始src属性来触发onload和/或onerror事件。这是我的意思的一个例子：

$("<img/>")
    .load(function() { console.log("image loaded correctly"); })
    .error(function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

下载所有图像时要更改的背景图像

1 个答案: