用动画加载背景图像

Question

我使用一个小脚本将图像显示为div内的背景。问题是，我需要一些动画，这一点，但没有我曾尝试的作品，我实际的脚本是这样的：

var valimg="image_1.jpg"; 
jQuery("#sw_pic").css("background-image",""+valimg); 
jQuery("#sw_pic").fadeIn(2000); 

的问题，例如，当我运行它，它不会产生淡入淡出效果，我也试过jQuery的animate()，但结果相同。只有不透明似乎起作用，但没有其他。

如何使用这个或写代码，最终运行并获得一些作为背景加载图像时的影响？

问候和thank's的帮助

Answer 1

尝试使用.hide()

var valimg="image_1.jpg"; 
jQuery("#sw_pic").css("background-image",'url('+ valimg +')'); 
jQuery("#sw_pic").hide().fadeIn(2000); 

，或者你可以在https://stackoverflow.com/a/4631006/3385827

Answer 2

图像加载缓慢

问题看看假设你在html中设置了一个背景图像，图像在第一次加载时就懒惰了下次可以使用浏览器缓存。准备好后，尝试在dom元素上加载图像。

在HTML标签负载DOM准备

$(function() { 
    var valimg="image_1.jpg"; 
    jQuery("#sw_pic").css("background-image",""+valimg); 
    jQuery("#sw_pic").fadeIn(2000); 
}); 

这样

<img src="/path/image_1.jpg" style="display:none"/> 

您的jQuery的图像内重要