背景图像加载动画

Question

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

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

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

如何使用此代码或编写最终有效的代码并在将图像作为背景加载时获得一些效果？

关心并感谢您的帮助

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标签中加载像这样的图像

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

你的Jquery在dom准备就绪

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