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

搜索jQuery的ready()事件，并使用attr('style', 'your_inline_style')在事件中设置CSS。

Answer 2

您可以尝试为您的元素使用ID：

<img id = "something" class="animated fadeIn" src="https://example.com/img/image.png" ...

然后在页面准备好之后对该ID执行jquery：

$(document).ready(function () {
    $("#something").css('background-image', 'whatever-you-are-linking-to');
});

Answer 3

我会更改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.
});

Answer 4

在页面加载时运行此选项。它将删除样式，然后在图像完全加载后替换它。

(function(){
    var img = $("img.animated.fadein")[0];
    var style = img.style;
    img.style = "";
    img.onload = function(){ this.style = style; };
})()

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

4 个答案: