I came across the problem of image loading in website.
It's need to load 3 high resolution images in home page, and when open, it's showing website other contents first and load this images which is fine for now.
But it's slightly awkward, and would like to have similar image loading process like Google image search.
When I click image in Google, it shows blurred or pixelate image which seems like low resolution and lower size and loading original image a bit later.
They might use special thing as they are Google, but if someone have done this kinds of things before, I need your help.
Thanks in advance
Sounds like you want what are called "progressive JPEGs", where multiple images of varying quality are saved in one file, and the browser loads the low resolution images quickly to get something in the page, and replaces it with higher resolution images once they've been loaded.
Here's a tutorial on saving JPEGs for the web as progressive in Photoshop
You can use jQuery. The following is a general idea, not an exact code.
For each image use something like:
<div>
<img id="myimg" src="" style="display:none">
<img src="low-res-version link">
</div>
You should also keep a low res image.
Use jQuery to set your images src after the page loades, and use the next() function to remove the low res image.
$(document).on('ready', function() {
$('#myimg').attr('src', 'link to the image').on('load', function() {
$(this).css('display', 'block').next().remove();
}
You can also check this question: Fast Image loading methods, low to high res with multiple backgrounds - javascript solution?
Well, I choose resolutions from the server-side;
loading the low-res immediately in a z-index=0 object,
loading the one or more hi-res objects into negative z-index objects
and then at onload(), choose which object should be on top
Related
I have a question regarding the image loading style as shown on http://www.e-flux.com. This website first loads an image of a certain pattern (randomly) before proceeding to display the actual image. My guess is that this is to have visually pleasing content before even having loaded the total website.
I have looked at the source code and I saw that it had a class of "lazy is-loading". I think it has to do something with that.
I'd like to replicate this effect and did some research, about progressive images and such. Also, this website: 'css-tricks.com the-blur-up-technique-for-loading-background-images/' explains about loading a small image first and blur it to keep loading times low until the actual image has been downloaded.
But I can't seem to find how they did this trick at http://www.e-flux.com.
All info is appreciated!
Old question but doesn't have a selected answer.
I'm working on the same thing, and something simple I'm trying is as follows:
<img style="background-image: url('MYIMAGE.svg');" src="MYIMAGE.jpg" width="500">
the .svg is a very small file and thus loads almost instantly. Then, the .jpg pops in when it's done. I literally have no other code - trying to keep it simple.
Sometimes the CSS background-image is not desired. You could also use a simple inline javascript for this purpose, a disadvantage is that the placeholder image has to load first and correctly. However, this is usually not an issue, as the placeholder image will be faster to load in the first place, and may already be in cache.
For example:
<img src="placeholder.jpg" data-src="my-image.jpg" onload="if(this.src !== this.getAttribute('data-src')) this.src=this.getAttribute('data-src');">
This works because the browser will typically leave the currently displayed image in view until the new image has loaded.
It might not be a perfect solution, but it is simple, fairly readable, and easy to implement.
Looking at their source, its done using a background-image sprite, positioned on a div element - alongside the image that's eventually loaded..:
<div class="lazy-placeholder item-image-wrapper-bg6" style="width: 512px"></div>
and
.item-image-wrapper-bg6 {
background-image: url(../elements/bg-6.gif?2);
background-size: 85px;
}
I'm want to load images of products in a website with an animation of an hexagon grid
Hex_loading DEMO
I would like to know what is the best way.
I've read about inserting a gif, but I think image quality wouldn't be good; or video, but I don't know if it's to much for what I want (also I would have to load directly images for mobile devices).
Is there any other tecnology I'm missing out that would be a better fit for what I want?
Thank you in advanced
I don't think there is a way to change the loading pattern. But you can wait for the image to be loaded and then play an animation.
I suggest using a html5 <canvas> element to animate the images.
I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once.
The scenario is this..
I have a slider which contains the thumbs for all the larger images; these all load when the page does.
The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so..
function changeMainImage(image) {
// Set big image
var big_image = image + '-big.png'
// Update main image url
jQuery('#main_image').attr('src', big_image);
}
Now because the large images don't load when the page does, this causes a small delay for the large image to show, which is rather undesirable.
Now I'm thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway.
This would allow me to reduce the number of http requests by 1 * amount of pics and also give me instant load of the large images once the thumb is clicked.
My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12.
Both versions have pros & cons - any advice what to do here?
The method you currently have is what I prefer to do. Load what is visible.
Now, to make the user experience better, many sites use a couple techniques. The first would be to pre-load the next image or two. If you have a slideshow-like display and have a good idea of what order the images will be displayed in, this is good.
The second is to display the thumbnail while the large version downloads. If your thumbnails are of a decent size, this lets the user get visual feedback that their click worked, and on decent connections the image will be downloaded soon after.
Finally, I recommend using progressive JPEG (if your images are photos) so that they are enhanced as they load.
For your data on sizes (and any other metadata), keep that in a JavaScript array of objects, or wherever else you store your image data. You can easily use JSON for transit from the server.
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 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".