背景图像加载动画

Posted 2023-05-08

【中文标题】背景图像加载动画

【英文标题】：Background image load with animation

【发布时间】：2016-03-31 23:47:18

【问题描述】：

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

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

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

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

感谢您的帮助

【参考方案1】：

尝试使用.hide()

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

或者你可以看看https://***.com/a/4631006/3385827

【参考方案2】：

图片加载缓慢

问题是假设您在 html 中设置了一个背景图像，该图像第一次加载延迟，下一次它可以与浏览器缓存一起使用。准备好后尝试将图像加载到 dom 元素上。

html标签中的重要加载图像这样

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

你在 dom 中的 Jquery 准备好了

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