CODEWITHSUNDEEP
javascripthtmlcssperformance
jovan
jovan

Reputation: 339

JS: Prevent images loading lazy after setting to display:block

On my website I need to toggle the visibility of complete articles.

When I make them visible (display:block), the text appears very fast while the space, where the image should be, is white. After a half or a second the image appears from once (it was loaded from the server before, so that's not the prob xD).

Now maybe there is a solution where I can hold the image in the RAM.

I don't even know how to call the Problem so I couldn't found much on google.

(Its important to take the article out of the DOM-Tree so setting opacity or visibility to 0 is not a solution).

Upvotes: 1

Views: 164

Answers (2)

ldg
ldg

Reputation: 9402

It's up to the browser how it stores and fetches images from cache. There are a lot of factors, including what else the browser is doing, how many images, how big they are, etc. If it's taking that long, it's possible they are getting forced out of cache or they are too big or some other problem. Have you checked to make sure they are indeed being cached (again, this may be somewhat browser dependent)? Also make sure you don't have caching disabled (in your dev console or similar).

There are a lot of potential options to manage the image data, really depends on what you are doing as to the best solution.

Upvotes: 1

mansoor.khan
mansoor.khan

Reputation: 2616

This SO answer explains it clearly. In short,

If you render the HTML on the page, even if it's hidden, it's going to load. If you want images to load only when they're needed, you're going to have to dynamically set the source (src) on the image tag in javascript.

Upvotes: 0

Related Questions