I have a landing page which is a few sections with images as the background. Each section takes up the size of the screen. In one of the sections the images change every 5 seconds.
My website loads and works fine on Desktop (as far as I can tell).
However on mobile as I scroll up and down the page it keeps on reloading.
For example: I'm looking at section 2 that has been loaded. I scroll down to section 3 and it's still loading. Once it's loaded I scroll to section 2, section 2 begins reloading even though the it's the same image there.
No matter how much I scroll up and down this happens.
I am using bootstrap 3, jQuery (not jQuery mobile) and HTML5
*Note, section 1 has images that keep on swapping in and out. I load those images in the background before replacing the old image by:
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)');
}
Why don't you use a simple pure css slideshow for your first section?
pure Css3 slideshow for me is a simple but good solution for fullscreen background image.
On which mobile device has been tested?
I encountered this problem on iPad (4th generation), iPad (3rd generation) and some iPhone 5C and 5S.
What's the images size? They have been appropriately compressed?
I partially solved by reducing the images size
Related
I have a website that consists mostly of images, which are either set as background to divs or as .
Problem is that on every phone I have checked, when scrolling the site top to bottom and vice-versa images are rendered slowly. Sometimes they remain rendered, other times they get re-drawn.
It's not that the images are not loaded, as they get displayed at some point of time, but after a few seconds when swiping back to them, they disappear and appear when scrolling back to them.
I've checked with all Samsung Galaxy lineup, including tablets and this behavior is the same.
Preloading the images seems to have absolutely no effect, and the same behavior appears whether the image resolution is high or low.
Is there any way to force Chrome not to redraw images randomly?
I have implemented a simple jquery carousel for mobile devices which has three containers for three images at a time. I have used jquery for the animation. Depending on the user's swipe direction, left or right, I update the contents of the relevant image container. The contents include the image's src path and the image title in a div tag. This works fine across all Android devices, but I am getting a delay in image load in iOS devices. Due to this, there is a flickering when the previous image is replaced with a new one. How can I solve this?
Thanks in advance!
Add 2 more containers off screen (one at each side) to pre-load the images and scroll them in when needed. This is a very common design.
Does Bootstrap "Carousel" load all images at one time? If so, does it reduce site loading speed and increase loading time?
I do not know how Bootstrap Carousel javascript file works. When next icon is clicked, if next image is loaded via ajax, there is no problem. But if all images are loaded at one time, I think it reduces page speed.
Any idea?
Bootstrap carousel just rotates it's items. If images are defined by src attribute, images will be loaded with the rest of the page.
You can use some lazy loading solutions to load images sequentially - Google search
Bootstrap does not do any magic lazy loading behind the scenes as Tigran points out. However, many browsers do not request images that are hidden through "display:none". So when inspecting network traffic with, for example the Chrome browser, you will see that the images are in practice "lazily" loaded.
An outdated and almost unreadable list of browsers with this behaviour can be found here: http://www.w3.org/2009/03/image-display-none/results
I have a webpage with a news feed. And the news feed has a bunch of images stacked vertically. New images populate the page as the user scrolls downwards.
Things start off fast and smooth, but as more images load (and more scrolling down) the page starts to get really slow and choppy. Scrolling becomes super unsmooth.
What's the problem? And how can I fix this?
Try using LazyLoad for JQuery (link). It doesn't load images until you scroll down, so perfect for your use case.
How big are the images you are using? You should try to make image sizes as small as possible.
You could try pre-loading the images in JavaScript (Image object). That way, when the user scrolls down, the images are already loaded (or partly loaded).
Maybe there's a bug in your javascript.
If not, you could try to delete the newest pictures when older ones are loaded.
I have an javascript image gallery that slides in images from offscreen in Mobile Safari. It seems like the offscreen images are not getting cached because every time they slide in it takes a few seconds to load them at which point they are already halfway to their destination. I'm trying to get all the images to load during the initial page load. It seems Mobile Safari ignores or "garbage collects" offscreen images. Is there a way through CSS3 (some -webkit prefix property) or any way so that all images load and stay loaded so their is no flickering.
Thanks!
If the set of images in the gallery is somewhat static (ie. it's managed through some sort of upload process rather than picking up images dynamically), you could try using an HTML5 offline application cache for your images. This blog post describes the technique, along with some other pitfalls frequently encountered with iPhone caching.