I have a lot of images but loading them slows down the page, and what I need is for it to load the first image to 100% and then start loading the next one, and the cycle repeats until all the images are loaded.
For example:
<div class="imagenes">
<img src="pequena1.png">
<img src="pequena2.png">
<img src="pequena3.png">
</div>
The important thing is that the next image automatically loads "only" after the previous one is 100% loaded, in this way the page will not be overloaded.
The number of images can vary, so it would be nice if you could detect the tag <img>
included in a <div>
certain one.
Some kind of loop, but stop until the last image is loaded.
A simple solution would be to load the images one by one, not using su
src
but a data-attribute, and replace thesrc
one of the image only when the previous image has been loaded (using the image eventonLoad
for this). For this you could use a simple function that reads the images, saves them in a list and loads them in order.Something like this:
To avoid problems with empty images, it would be nice if you set
src
the images with a transparent pixel or something. That way you wouldn't have any unnecessary calls to the server or possible 404 issues.Here you can see a working demo:
The same code converted to a jQuery mini-plugin (as mentioned in the comments ):
I don't know if this is what you had in mind though. The idea is that you can now call the function
cargaImagenesUnaAlTiempo
from jQuery by selecting the element you want it to apply to. For example, if you want the images to#div-con-imagenes
load one by one, then you would do$("#div-con-imagenes").cargaImagenesUnaAlTiempo()
.You could use the Lazy Load plugin , depending on how the page scrolls, the different images will load, so you could avoid slowing down the page towards the user.
DEMO