I'm facing a challenge with displaying multiple images on the same page in different groups. Some of these groups have hidden elements with opacity = 0, which are then set to opacity = 1 when they need to be shown.
The issue is that all images load at once, causing a heavy initial load (93Mb).
To address this problem, I want to dynamically load the images upon request along with the content of the specific divs containing them. Initially, I tried using the following code:if($('#id_of_div').css('opacity') == 1) {
loadTheCode();
}
function cargarContenido(pagina) {
$('#content').animate(
{ "opacity": "0" },
function() {
$("#loadimage").show(); // show a loading image
// load content when opacity = 0 animation finishes
$("#content").load(
pagina,
function() {
$("#loadimage").hide(); // hide the loading image
// set opacity to 1 once content has been loaded
$('#content').animate({ "opacity": "1" });
}
)
}
);
}