CODEWITHSUNDEEP
javascripthtmlimagegridrendering
Lucio
Lucio

Reputation: 33

Browser slow on rendering a grid of 5600 divs with img inside

Let's say I have a javascript that, after some calculation, write a string like

str += '<div class="divClass"><img class="imgClass" src="all_images/'+ result_image +'.png" /></div>';

The string is needed to populate a "grid" of images, and I need to update the string at least 15 times per second.

Problem is, as you may guess, the browser is really slow on doing this job...

any idea on how to improve the "rendering" time?

Any input appreciated.

Upvotes: 0

Views: 77

Answers (2)

user2417483
user2417483

Reputation:

@Lucio Part of the delay is that the browser needs to rebuild the DOM with each newly created div. Try building the grid in HTML first then all you need to do is fill in the image file info i.e. 

imgs = document.querySelectorAll(".divClass img");
for(x=0; x<imgs.length; x++ ) {
   imgs[x].src = "all_images/'+ result_image[x] +'.png";
}

Upvotes: 1

Robert
Robert

Reputation: 362

Is this loading 5600 individual images? If so, if the images are pretty small you could try combining them into a sprite and then calling the single image, and specifying a background position to display the individual images at the given locations. Reducing 5000+ image calls would help significantly.

Upvotes: 2

Related Questions