Is it possible to delay a style property using jQuery?

Question

This is my code:

<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)" />

I need to load the style property after the page is loaded.

Is it possible using jQuery?

Answer 1

I would change the html to use data-attributes

<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)" />

and then apply it to the actual style when you want (using the load event or a timeout)

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

This way the code will apply to as many elements you want

---

The timeout version would be like this

$(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.
});