I have a site that I load images only when these are in slightly below the view point.
This way, the site first loads without the images then determine what images are needed to be loaded based on the viewpoint.
When user scrolls, and the image is just below the viewpoint, then it loads them.
It works fine on desktop. No laggy, no stutter.
However on mobile web, when I scroll, it stutters as the images are loaded.
Once everything is loaded, the site scrolls up and down smoothly. Also images are resized on the fly to minize file size.
The question that I have is that, what is the best way to load lots of images?
I am loading them only after the site is loaded, then only if they are just bit below the view point.
Do you think I should load them all to avoid stuttering especially on mobile?
I googleed smooth image loading but I don't think I am searching correct terms.
Anyway suggestions will be much appreciated.
Thank you.
Here is a simple and lightweight JS lazy loader library. It's straight forward and easy to understand.
BLazy.js
There is a walk through example from their site.
<script src="blazy.js"></script>
<script>
(function() {
// Initialize
var bLazy = new Blazy();
})();
</script>
Then in your HTML you would setup your images like this. Give it a b-lazy class and a data-src attribute that points to the image.
<img class="b-lazy" data-src="image.jpg" />
ebLazy.js – A lazyload image script
blazy.js examples
Related
On my website, I have several images with an onload and onerror callback
<img onload="imgCallback()" onerror="imgCallback()" class="article-img" src=":assets:/price/12-2.jpg" alt="A chart showing vitamin and mineral content of liver, kidney, spleen, heart, broccoli, kale, banana and apple" />
Some initialization is only done after all images have loaded because I need the full height of the container element after all images are shown.
This works fine on my desktop, however, it seems to not work on some mobile browsers. I have tested this on my Android Chrome browser and it seems to only load images lazily after I scroll far enough down, delaying page initialization that is expected to happen on the initial loading of the website.
I can't really think of any other way of solving this as I need the full width of the container post image loading, something I don't know statically, therefore I am asking if there is a way to signal to the browser that it should eagerly load images?
Found an answer here.
I simply had to add loading="eager" to my image tags.
Ok, so its been a while since I've built a website, and I'm trying to blow out the cobwebs, so to speak.
I have built the following website: http://pinkgiraffecakes.tk/
As you may have noticed, it takes a long time to load the Title Bar. I am aware that you can pre-load images using Java and CSS, but the solutions provided all seem to be for use on other pages (i.e. pre load images on the home page so they are quicker to appear on other pages).
What I would like to do, is to pre-load the title bar and all the other associated images, store them to the cache, THEN show the homepage.
Is this possible? If so, could someone please provide sample code or a link to a tutorial on how to achieve this.
Thanks.
First and foremost, you should scale and optimize your images before resorting to lazyloading, preloading and shenanigan-loading. I ran pingdom on your site and almost choked.
The main title weights 3.5MB, but it can be optimized lossless to 185Kb
The facebook button weights 3.5MB too, and it can be optimized lossless to 68Kb.
I just shaved over 7MB from your home screen.
Besides that, you're serving 1280x720px images as 150px x 75px buttons. You really need to display a scaled version instead of using the raw image with fixed height and width.
I'm using Skrollr.js to animate an image sequence. I took inspiration from how the http://moto.oakley.com site handles image sequences, and built some scripts to help me automate writing a series of images into the DOM. Then, I use Skrollr to change the display:none; to display:block at key scroll positions. My script preloads all the images before dispatching a complete event, and then I initialize Skrollr and allow interaction.
So, basically I have a <div> containing that has a bunch of these:
<img src="seq-000.png" data-0-top="display:block;" data-50-top="display:none;">
<img src="seq-001.png" data-0-top="display:none;" data-50-top="display:block;" data-100-top="display:none;">
<img src="seq-002.png" data-50-top="display:none;" data-100-top="display:block;" data-150-top="display:none;">
...
Now, this is working just fine in Chrome and FireFox (naturally), but Internet Explorer 11 seems to have problems rendering the images during the first scroll through the page. In other words, when I first load the page and scroll the images blink into place like they have not be preloaded, but subsequent scrolls the animation is perfectly fine. It's like IE11 hasn't rendered the images into memory, so the draw speed to the screen has a delay the first time any image is displayed.
I don't think Skrollr is the problem. Perhaps there's some magic CSS setting I should using.
Does anybody have any tips for making image sequences so they look ultra smooth everytime even in Internet Explorer?!?
Thanks!
So I'm attempting to load images in javascript dynamically as the user is scrolling around. The entire application is offline and is written in HTML and javascript. The "scrolling" around behavior is done through CSS3 animations.
The problem is that when I set image.src = "foo.png" it blocks the UI until the image has loaded. Is there a way around this?
How long is the UI being blocked? If it is local then I wouldn't have thought it much at all.
Anyhow, the reason the UI may be being blocked is because it needs to download the image to determine its size. If it doesn't know the image size it will not know how it will affect the layout.
The first think I would do is to set with and height attributes as soon as the tag is created.
I wrote this(jsfiddler) plugin that creates a slideshow. It works okay but the problem is that I have to use it for big background images. In Chrome it's nice and smooth but in IE and FF the transitions are really clunky and laggy.
At the following link you can find an example that's very slow in the browsers mentioned.
http://www.friendly-stranger.com/projects/kick/
The images them self are a little optimized to around 180kb.
You may be overthinking this. Why use jQuery to create an image slideshow for the background images? Why not just create an animated GIF and set it as the background of your body tag? That way, the only overhead you have is the downloading of the image.
They both worked for me, just make sure the function waits until the images are loaded to run (jsfiddle does this automatically). I would recommend having the div start hidden, and when it is done loading, appear. it hides the lag (if there is any). http://jsfiddle.net/RT96d/3/