jquery - 是否可以使用 jQuery 延迟样式属性？

Question

这是我的代码:

<img class="animated fadeIn" src="https://example.com/img/image.png" style="background-image: url('.$this->url.'/thumb.php?src='.$row['background'].'&t=b&w=800&h=300&q=100)" />

我需要在页面加载后加载样式属性。

可以使用 jQuery 吗？

Answer 1

我会更改 html 以使用数据属性

<img class="animated fadeIn" src="https://example.com/img/image.png" data-style="background-image: url('.$this->url.'/thumb.php?src='.$row['background'].'&t=b&w=800&h=300&q=100)" />

然后在需要时将其应用到实际样式(使用 load 事件或超时)

$(window).on('load', function(){
   $('[data-style]').attr('style', function(){ return $(this).data('style'); });
});

这样代码将应用于您想要的任意数量的元素

<小时/>

超时版本会是这样的

$(window).on('load', function(){
   setTimeout(function(){
       $('[data-style]').attr('style', function(){ return $(this).data('style'); });
   }, 5000); // apply the style 5 seconds after the page is loaded.
});