Welcome
I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px.
My vision involves creating a captivating visual experience for users as they scroll through the page. I want the images to animate like a flipbook in the background, synchronizing with the user's scrolling progress. For instance, if the total image count is 1000 and the user has scrolled 32% down the page, they should be viewing the 320th image. Upon reaching the end of the page, they will see the final 1000th image.
How can I tackle this efficiently? Each image file size averages about 150kb, and it is crucial for me to preserve their quality without further compression.
Exploration So Far
Maintaining all images in memory constantly
New images are loaded as the user scrolls, while previous ones are hidden with
display: none;. Although functional, this method becomes progressively sluggish with extended scrolling.Limited image retention in memory
This method involves loading the current image along with 20 preceding and following images. Images beyond this range are "removed from memory". Despite efforts, performance issues persist, possibly due to inadequate memory management practices.
Inquiry 1
What techniques or strategies would you recommend for optimizing this project?
Although option 2 seems promising, I am open to alternative suggestions that could enhance efficiency.
Inquiry 2
How can I effectively remove images not just from the DOM but also from memory?
To ensure the success of this project, proper handling of image removal seems necessary.
Current Strategy
Here's an overview of my current approach:
var imageNum = -The current image number to be displayed-;
var flip = -the container element housing all images-;
flip.children().each(function(i, e) {
var jE = $(e);
var childInd = parseInt(jE.data('page-number'));
if (childInd < imageNum - 20 || childInd > imageNum + 20) {
jE.removeAttr('src');
jE.remove();
jE = null;
e = null;
}
});
The section above raises concerns regarding proper memory release:
jE.removeAttr('src');
jE.remove();
jE[0] = null;
e = null;
These lines were composed after consulting various sources. Since no event handlers are attached to the images, this aspect is likely not problematic.
How can I ensure effective garbage collection to free up memory occupied by these images? Is my current procedure adequate to facilitate memory liberation?