I need to prioritize the downloading of (in my case) images.
To do this I would prefer to use some kind of plugin (preferably for jQuery) that lets me do this without having to build my own downloadqueue mechanism.
Consider this scenario:
You have a web page.
Your web page is able to show a given user three images.
These images are only shown one at a time at the users request.
You would then ideally want to load the images from top to bottom until the user makes a selection. You would then want his selection to move up the queue and become next in line (with every selection he makes).
Of course in a page with only three images this isn't really a problem, but with more and more images it becomes important.
I am currently only using background-image to show images and would like to keep it that way.
Oh, and also, I would like a "spinner.gif" to show while an image is loading.
Any suggestions?
Thanks.
UPDATE
I ended up making my own queueing system based on this: http://jqueryfordesigners.com/image-loading/
Assuming the actual page will have a lot more than three images, take a look at this image Lazy Load Plugin . It's based around what is and what is not below the fold, works sequentially through the images, and can be configured to preload in X ones below the fold as you are scrolling. It allows for a placeholder image but might need some rewriting if you want it to expose background images rather than working on actual img tags.
Here's an example of loading 'on-demand' or when scrolled into view. Though not directly answering your question but is fundamentally similar.
http://www.webresourcesdepot.com/dnspinger/
Try scrolling down and the page gets loaded with my content. Will work for images as well.
The resource for this demo can be found at "Load Content While Scrolling With jQuery".
Related
I m building a website where i m using some gif file but the gifs start animating as soon as the page loads. I want them to trigger as the user scroll on to the particular gif section i.e current viewport. See example: http://www.invisionapp.com/
I have searched the entire internet but couldnt get the simplest way of doint that. Anybody having any idea please assist.
The website you have shared is using something known as lazyload. It will load images/videos only on scroll.
For some lazyload alternatives, please refer to these:
- How to lazy load natively
- Vanilla lazy load library on Github
What you can do is use two images, one static and one which has an animation. So, when user scrolls over target, in your case viewport, then, you replace a static image with the animated gif image.
I am creating a web page that will have 120 items (image + description + link) each displayed in a fixed sized div.
Will the page render quicker if I include only 30 items in the HTML, put blank (fixed size divs) in place of the other 90, and load the contents of the other divs as the user scrolls down the page?
I think possible advantages of this lazy loading might be:
HTML file less than 50% of original size (however, this may not affect loading speed as I would expect the browser to display the top-most elements as soon as they are loaded)
Top 30 images will load faster as they are not competing with the other 90.
Are these assumptions valid? Will the page render faster? What else is relevant? (e.g. fewer DOM elements at first, JavaScript overhead, etc.)
Well, yes and no...
The page might start rendering slightly earlier because of the smaller document size, and the time to render the page might be slightly shorter because there are fewer elements, but neither of those are likely to be even noticable.
The images won't load faster because there are fewer images on the page. The number of simultaneous loads from the same host is still a lot lower than the 30 images that you plan to load initially. The images will normally start loading from the top, so for the top images you won't notice any difference from the missing images lower any page.
What's relevant is how much the browser will have to load and run before it can start to render the actual page. For example, any Javascript files that are loaded in the head of the page will have to load and run before the browser can render any of the content.
I would say the page would render quicker, and feel quicker for the use.
However there are other things you could try:
I presume you have optimized your images to start with?
If there is a 'previous' page to this, you could pre-load the images in the background so that they are already cached when the user gets to this page?
Perhaps you can combine all your images into 1 big image (single http request) and use CSS to cut/position them separately
I have been working on a new site, and the person who cut it used dreamweaver. It put in mm_preloadimages into the header and uses it on the body. However, it's only loading like 3 of the 30 images on the more complicated pages.
Is preloading a common practice even with more modern html? Or should this be left to the browser to download images.
It depends on your need, according to requirements of the application/project. For example, I did it once for a specific need and it was that, I have used a hover effect on by blog using JavaScript and when I hovered over the element, it just toggles the image but I realized that, at the first hover it used to take more time to alternate the image because, the image used to be loaded only after the hover on the element and that's why I used image pre-loading technique, so, during the page load, I loaded the image that is going to be used for the hover effect.
So, it's not about common practice but it's about your need, if you really need to pre-load some images then you may use it but if not necessary then just leave it, IMO.
Also, remember that, every time you load an image, it makes an individual HTTP request to load the image, so if you load a huge amount of images on the page load, it may slow down the page loading.
The preloading concept mainly serves for menus that have different background images on mouse hover. You can always use image sprites to have all backgrounds you are using in one single image.
I think the common practice nowadays is to use CSS to style menus and avoid using images at all. If CSS rules cannot satisfy the needs of the design, you can put your images in one using sprites, thus eliminating the need to preload images and avoid having many http requests.
On my website there is a webpage where there are 100 images and it is inelegant to see the images that are loaded one at a time from the browser.
Is there some way to get it more elegant and nice to see ?
You could Lazy Load the images, which means they are only loaded when displayed on the browser. This works by simply using the following:
$("img.lazy").lazyload();
However, if the images which will be visible on page load are very large file size, theres not much you can do to prevent this.
An idea I have used before to make this more user-friendly is to place each img element in div which has a background image of an ajax loader. This at least gives the appearance that something is loading. Then once the image is loaded, this will overlay the loading image.
EDIT: Seeing your latest comments, if you are using very small images, as #afaf12 has pointed out, using CSS Sprites would be a suitable solution. A lot of large sites, including StackOverflow, make use of these. It means rather than 100 HTTP Requests being made for all the images, 1 HTTP Request is made (ie. 1 image download), and then CSS is used to position this image in different places.
There are various different CSS Sprite generators also available to prevent you from the laborious task of making this yourself:
Since images are very small, this could be a situation where css sprites are useful.
Instead of having 100+ small images, you have 1 large.
When you want to show a specific image, you have to specify background coordinates, for example:
div#div1 {background-position:0px -100px}
One way to make it look more pleasing is to make the images fade in when they have been loaded:
$('img').css('opacity', '0.0').load(function(){
$(this).animate({'opacity': '1.0'});
});
Demo: http://jsfiddle.net/Guffa/gzFFN/
http://code.google.com/p/jquery-appear/
jQuery appear event that is triggered when objects "appear" i.e. become visible on screen.
Create containers for all the images, and only load the actual images when they become visible on screen.
Another interesting solution can be found on this stack link. It is for all content but the code provided in an answer can be applied to image loading as well. Link
I have a layered div component which displays a successive series of large kb images by slide-animating away the top image to reveal the next image below. I'm trying to understand how best to approach this.
Approach 1:
layer a number of divs on top of each other, each with an image assigned as background, and slide away the divs as needed.
Will the hidden divs load their images on page load, or only when they are revealed? Is this browser/client specific behavior? Do all images (jpegs, pngs) behave the same way in this regard?
Approach 2:
Use only two divs- One that handles sliding, the other that will load and reveal the next image.
In this case, is it possible to pre-load the next image, so that the javascript isn't slowed down when the next image is revealed?
Thanks- and if anyone has other ideas, I'd love to hear them.
Your first approach, even if the images are 'hidden' via CSS, will load all images by all browsers via HTTP requests. Your second approach or some variant of it is probably better.
I'd recommend using AJAX to pull down each image as you go. It's definitely possible to preload the images.
You may want to consider existing slideshow/lightbox type of plugins for jquery or javascript. It's been done so many times you will sort of be recreating the wheel (unless it's more of a learning experience thing)..
Here's an interesting example of preloading with callbacks to alert you when it's ready. Maybe a good one to adapt?
http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
The first approach certainly degrades better. It will leave the images available and visible if viewed on a CSS-challenged browser. But that comes at the cost of having to pull down all the images from the get-go. The second approach is lighter on the initial hit, at the cost increased code complexity swapping images in/out.
You can definitely pre-load images with Javascript. just create an image object and set its source to whatever you want, which will automatically trigger downloading of the image. It doesn't have to be inserted into the DOM or visible to the user to do this.
Hidden divs SHOULD load their content automatically, whether they're visible or not. I can't think of any PC-based browsers that wouldn't do this, but I'd hazard a guess that some browsers intended for resource-limited devices (cell phones for one) might optimize things and delay loading contents until the container's made visible, to save on network traffic.