Preloading images using jQuery

[lord-t]

I want to preload my images I have on my site because their file size are pretty huge. And it takes like 4 seconds to load when I look at it in a browser the first time(uncached). How would I achieve that by using jQuery? Javascript works as long as it gets the job done.

[Paulie_D]

http://stackoverflow.com/questions/31079390/preloading-images-using-jquery-js

[Shikkediel]

Shane’s link led to this, which I thought was particularly interesting :

https://developers.google.com/speed/pagespeed/insights/

Some of the advice there, like using inline JS to speed things up would not be something I’d ever consider though. But I’ll definitely be looking at leveraging browser caching myself.

A bit more on topic – preloading images won’t speed up the process itself. it can only take care of not seeing the images ‘build up’ while loading.

[Shikkediel]

Okay, I guess there’s more to that than I thought. Interesting read in any case. Although it may not have a big impact on the relatively plain way of coding I do myself, it’s tempting to get the rating up from the 60-70 it is now.

8-D

[Shikkediel]

Wow, simply adding some htaccess to enable deflate turned out to be a pretty good move. If the images are svg, that should save a lot of bytes…

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>

[Author]

Posts