Site images save reboot on mobile devices

Question

I have a landing page, which is a few sections with images as a background. Each section takes up screen size. In one section, images change every 5 seconds.

My site loads and works great on the desktop (as far as I can tell). However, on mobile devices, when I scroll up and down, it continues to reload.

For example: I look at section 2, which has been downloaded. I scroll down to section 3 and still load. As soon as it boots, I will go to section 2, section 2 will restart, even if it is there. No matter how much I look up and down, this happens.

I am using bootstrap 3, jQuery (not jQuery mobile) and HTML5

* Note. Section 1 contains images that continue to be replaced and uploaded. I download these images in the background before replacing the old image with:

var imgPreload = new Image();
$(imgPreload).attr('src', '/new-image.jpg').load(function() {
    $(this).remove(); // prevent memory leaks
    $('#section1').css('background-image', 'url(/new-image.jpg)');
}

Answer 1

Why don't you use a simple clean css slideshow for your first section?

Css3's clean slideshow for me is a simple but good solution for a fullscreen background image.

Which mobile device was tested on?

I ran into this problem on the iPad (4th generation), iPad (3rd generation) and some iPhone 5C and 5S.

What sizes of images? Were they appropriately compressed?

I partially decided by reducing the size of the images