Question

我试图找出是否可以在淡入内容之前检查是否已加载背景图像？背景图像在css中设置，因此如果用户没有打开js，他们仍然可以查看该网站。

我试过了$(".quick-load").load(function () { $("#content").fadeIn(); });

我也使用过.ready（）但没有任何效果。

我遇到的确切问题是图像在某些情况下会闪烁。

任何想法都会有所帮助，谢谢。

Answer 1

我认为您应该尝试稍微不同的方法，即首先将图像加载到隐藏的图像标记中，然后在加载事件中执行您的炫酷渐变

<img src="background.png" alt="" id="background" 
style="visibility:hidden;position:absolute" />

然后做：

$('#background').load(function() {
   $("#content").fadeIn(); }
});

这样可行，因为浏览器会在加载时缓存图像，并且可以在后台使用。只需确保不可见图像和背景图像的来源相同。

Answer 2

您可以使用隐藏的<img>“预加载”图片。

$('<img/>').attr('src', 'http://picture.com/pic.png').load(function() {
    $("#content").css({"background-image":"http://picture.com/pic.png"
                 .fadeIn();
});

How can I check if a background image is loaded?

是否可以使用jQuery检查是否已加载背景图像？

2 个答案: