I just recently noticed that when you click an image on Yahoo! Image Search it first shows a low resolution image which then gradually turns into a high resolution image.
Example:
Yahoo! Image Search
When you click the link above and click through all the images you notice that they're always showing a low resolution image first. Why are they doing it? Does the website appear to be loading faster to the user if they're doing it this way?
Also, could someone please point me into the direction on how this is actually done (preferably by using JQuery, in the case that they're using JavaScript to do it)?
They're using a cache of thumbnails from this URL
http://ts1.mm.bing.net/images/thumbnail.aspx?q=NUM&id=HASH
where HASH and NUM are (somehow) references to a particular thumbnail.
For example, NUM = 1148286928700 and HASH = d2f4bbf91a853cefbc18794b6eb9ecdd are a reference to this thumbnail.
Of course, thumbnails are smaller in file size than bigger images, so Yahoo! loads from a cache of thumbnails first to give the user a glimpse of what the image is, and loads the full size image in the background.
I suspect the technique they use is load the image in to a hidden img tag, and then bind to the load event of that image tag to a function which replaces the thumbnail src with the full size image src. Hence, when the (hidden) full size image is loaded, it replaces the thumbnail image we see on page load.
Let's assume the thumbnail image is loaded in to an img tag with an ID of main_image, and our full size image is loading (in the background) in a hidden img tag with an ID of secondary_image. Then we bind to the load event of #secondary_image, and replace the src of #main_image on load:
$('#secondary_image').load(function() {
// on big image load, replace the src of the thumbnail image
$('#main_image').attr('src', $(this).attr('src'));
}
Then when the user wishes to view another image, we replace the src of #main_image with a different cached thumbnail, replace the src of #secondary_image with the large image, and bind the load event again (so ideally you'd create a function with the above code, and call this function whenever you changed the #secondary_image src.
All they are doing is showing a thumbnail first, then waiting a bit (to save bandwidth for you and real site) then loading the real image. To do that, they are probably just changing the src attribute on the image, or adding another image on top.
Interesting to note that the thumbs are provided by Bing.
Related
I have a website I am working on that has an image gallery, and the user is uploading huge images. The div I have the image gallery containing is set to a certain 400px width to match the layout. The issue I am running into is on page load, for a split second, the first image in the gallery loads on the page at normal size (huge), and then the css kicks in and resizes the image to 400px. I am wondering if there is a way to target and change image size before the site code is rendered. Something like:
jQuery( window ).load(function($) {
//step 1: find the image using the unique css class it is inside
//step 2: resize image to 400px
//step 3: let rest of site html/css/jquery load
});
I am using $(window).load instead of $(document).ready in an attempt to target the image before html/css/jquery kicks in. Any insight/help on this topic would be greatly appreciated.
Try adding the width and height attributes to the image element. Your CSS will override these properties when applying styles to a specific class. Furthermore, you don't need to mess with JS.
<img src="image.jpg" width="400" height="auto">
I have found ways of changing the zoom image using links with rel="smallImage:image1.jpg" etc, but I am creating an image at runtime and adding it to the page, so the link will not be there when the page first loads (which it seems like it needs to be).
When I generate the image at runtime, I add a thumbnail to the page and a link to open the thumbnail as the large image. I then want to be able to hover over this image to get the cloud-zoom functionality, but even if I use the code I mentioned above to set the image, I still see the original image as the zoom image.
I was wondering if there was a way I can use JQuery to change the zoom image at the same time I change the source of the image? I was hoping for something as simple as $("image1").CloudZoom.zoomImage = "image2.jpg" but nothing like that seems to work.
Thanks guys
You can place the thumbnail in a div and give the div an onclick event.
<div onclick="DisplayThumbnail(ImagePath)"><img src="ImagePath" /></div>
Call a javascript function and add this:
$('#CloudZoom').attr("href", newimagepath);
$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
The cloudzoom uses the anchor tag's href to point to the image to use, so that is the reason we update the href to the new image tag.
This is basically a design question.
Preface
I have a web page which shows a list of thumbnails. The number of images can be anything, maybe hundreds.
What I need to do is this?
Get the number of total thumbnails.
Get the web url for each image.
Load each thumbnail into a box (div) and add each box dynamically to
scrollable container div.
User should be able to interact with the boxes ASAP.
I have other AJAX calls happening in the page.
The default method, set the src to each box and add it to the container. When loading stops, the image shows. The problem is that, all these image loading will hog the network and my other AJAX calls may timeout, which I can't allow. Also, the user should see the page as loading complete (loading bar should not show activity).
My Solution
The solution I have come up is this:
Use a local image as space holder.
Set the src of all the boxes as local image.
Change the src for first image to the web url.
When onload of the image fires, change the src of next image and so on.
Pros:
Only one image will be loading at a time.
User will be able to interact with the boxes.
Cons:
Only one image at a time may be a waste of bandwidth (what about 5 images at a time?)
What happens if user scrolls to the end, the images won't show up until all the other images have loaded.
Your opinion
I need expert opinions on how to improve this solution.
Requirements:
Some bandwidth should be available for other AJAX calls
User should be able to interact with the page.
Questions:
Is this solution having any other issues?
Is this cross browser?
Am I correct in saying this will not affect the other AJAX calls?
I am playing with a new website I created a few days ago.
The site contains lots and lots of gifs there is displayed on the frontpage. As of right now, a static .png thumbnail is showed and when hovered, it displays the gif instead.
This is pretty much what I want. However, as of now, the site preloads every single gif on the page, which takes a long time and a lot traffic is wasted. If there are 50 gifs on the frontpage and every gif is 2mb, that's 100mb traffic per user.
Isn't it possible to only load every png, then load the gif if it's hovered? I know it won't play smooth the first time, but I don't have a whole lot of web traffic on my web hotel.
Is this possible with either some PHP or good-old JavaScript?
Thanks
Change the URL of the image with hover. In this case with jQuery
$('#my_image').hover(function(){
$('#my_image').attr('src','my.gif');
});
Want to make it dynamic without having to set it per image? Add the HTML5 Data element:
<img src="my.png" data-gif="my.gif" />
And with JavaScript:
$('img').hover(function(){
$(this).attr('src',$(this).data('gif'));
});
You can add the HTML that contains the GIFs to the DOM after page load, inserting it as a string or using AJAX.
Another viable solution is to use CSS sprites and eliminate all those images by combining them into a larger one.
You're thinking about it the wrong way. Browsers don't request images unless you include the images in your page. You shouldn't try to prevent included images from being loaded, you should simply not include the images in the first place.
Remove the image URL from your code. In whatever code you have that currently makes the hidden image visible, you can set the URL as well.
Are the file names the same except for the extension? If so I would recommend this approach
Stop a gif animation onload, on mouseover start the activation
What you would do different is replace the .png with .gif this will load the gif on hover instead of at page load. Right now it sounds like you are loading both the .png and the .gif in a hidden div.
Edit:
Then on mouseout you would switch the source back to the .png.
so I have a general question about preloading. I am using a few large images as sprites to be appended in various places throughout my mobile site, but because they are background images (assigned on the fly when jquery assigns certain class names to divs) - I'm not sure how best to preload these.
I saw this post here:
http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html
where you simply do this:
var image1 = $('<img />').attr('src', 'imageURL.jpg');
but if I preload images in this manner, and then never directly assign them to a dom element (because they will be assigned as a background image with a css class) - is preloading these images doing me any good?
It should still help as long as your script runs at the end and not in the middle of DOM rendering (As that'll block the page). You won't see the flickr effect when they get assigned.
The image will be picked up from the cache as long as the image URL doesn't change.