I have a landing page consisting of multiple sections with images as the background, each section occupying the full screen. In one specific section, the images change every 5 seconds.
The website works smoothly on desktop, but I encounter issues on mobile devices. As I scroll up and down the page, it continuously reloads. For example, if I'm viewing section 2 and scroll to section 3, I have to wait for it to load. Then, when I return to section 2, it starts reloading again even though the image is the same. This reloading continues regardless of how much I navigate through the page.
My website is built using Bootstrap 3, jQuery (not jQuery Mobile), and HTML5.
It's worth mentioning that in section 1, there are images that swap frequently. To preload these images before replacing the existing ones, I use the following code:
var imgPreload = new Image();
$(imgPreload).attr('src', '/new-image.jpg').load(function() {
$(this).remove(); // to prevent memory leaks
$('#section1').css('background-image', 'url(/new-image.jpg)');
}