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.
Related
When on my website large amount of data like picture and gallery slider and data along with animation is being loaded it causes the scrolling of the page slow. when I try to scroll the page through the arrow keys the scrolling becomes almost zero with lags between them.
all the javascript files and css are being loaded from cdn links.
is there any specific reason why it is getting slow scrolling. I have used AngularJS.
This is just a guess, but you need to optimize all your photos for whatever size you are displaying it for because they are likely too large. You can use this link to create your new image files:
http://optimizilla.com/
Using the one time binding with angular and increasing the gallery sliding time and there are many way in which angular can be optimised.
https://www.binpress.com/tutorial/speeding-up-angular-js-with-simple-optimizations/135
It helped in my case
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
I am developing a website using parallax. Just a brief note on what I did so far.
I used the skrollr plugin for generating the parallax effect. With this plugin I was successfully able to move elements with different scroll speeds. However, there are a few major issues I really to resolve.
Given your understanding and guidance I look forward to get through them.
Here is what I am trying to address:
1) The site that I developed is not responsive with parallax. Data attributes for elements are written inline (and thats how so far I think they are written: inline). So because of that even on screen resize, the inline styling of data attributes remains intact. Hence, the responsive stuff for parallax (on desktop version) is not able to produce same effect on mobile versions.
2) I checked the sony website. Link : http://www.sony.com/be-moved/
They have used parallax and the site is responsive.
Parallax websites are based more on the imagery content. So, how does the site load faster when the images are of huge sizes. (Running into MBs). The sony website has very heavy images (size running into MBs). How do images of such heavy sizes load so fast?
3) Again, coming back to the sony website. On scrolling the user is shown various perspectives / angles of sony products. So, how are the multiple perspectives of every product captured for scrolling.
How is such precise sequential image with varying perspective for every product shown on scroll?
Its the entire background image that changes perspective. So, how is that done? Thats not just plain parallax, right?
I am mentioning this site because its implemented in a differenet way from other simple parallax websites. Sony's implementation is what I am interested in!
4) What would be best to do? Changing background images on scroll(like the way its done on sony) or changing the position of single elements using data attributes?. (like its done on www.numero10.ch)
I have been asked to implement parallax in two ways:
a) only move the elements within the background. Like if its a sky image with two clouds on the right. Then just consider moving the two clouds to the left on scroll.
or
b) Have different background images with the two right clouds moving to the left. So, that means I will have a volley of images for just moving the clouds from right to left; with every image having two clouds shifting towards left by pixel positions.
Looking forward for a reply. :)
Thanks for your patient reading.
I think this will lead you to the right direction: https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
It explains in detail exactly how the Be Moved website is constructed.
2) I believe they use something called "Lazy Loading" which is displaying a "fake" lighter image until all the HTML,CSS,JS is loaded to then load the real images and replace them.
3) That is not mere parallax , they are using the canvas element ( How exactly I don't know but check the page source )
4) It is better to leave an image as a fixed background and work with smaller elements.
I think that site is not just parallax layered scrolling, It is a combination of a sequence of video clips triggered on scrolling. I have not inspected the element of site but I think so. But site is loading tremendously fast compared to other such sites because of your cache in your system and implementation of lighter images in the starting and heavier images at last
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.