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.
Related
I want to preload all images on my page.
My page has some images used directly as links, i.e. as img tags within an a tag, as well as some images which are in the background-image property of some spans.
What's the best way to preload them all? I notice that a lot of the preload scripts seem to assume that the images will be loaded within image tags. For example, I've implemented this script: http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml
But it doesn't make a difference on my page where certain spans when hovered over should have a new background. There's still a pause on my page when the user hovers over an element, before the right images background shows up.
Edit
I know about using sprites, my question is asking for a solution apart from sprites.
The following jQuery plugin was featured on http://www.unheap.com a while ago. Could this be of service?
http://nick-jonas.github.io/imageloader/
I do notice that the Github repository is "unavailable due to DMCA takedown", but maybe it could point you in the right direction.
Another solution might be this plugin:
https://github.com/sebarmeli/JAIL
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.
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.
I have small animation using javascript and css. I made one sprite png file, composed of 24 frames, and put that image as background-image in div which has height and width of one frame.
When animation starts, javascript function is changing background-position values, so every 6 miliseconds we see next frame.
Animation is smooth, but I'm testing everything on local server, so I can't tell: is background-image loading whole image or just visible part?
What I mean is, is whole image preloaded, or some browsers, somehow, load just part of png that's visible and don't preload rest? If that's the case, I'll preload image some other way.
Anybody knows this?
Its loading the whole image initially.
Your CSS is making a HTTP request for that file, and then your CSS is styling the position of this image.
I believe one of the benefits of a sprite is that only one HTTP request is made, which is then used to display different graphics depending on positioning.
Read more details on this article:
http://css-tricks.com/158-css-sprites/
The idea was that the computer could fetch a graphic into memory, and
then only display parts of that image at a time, which was faster than
having to continually fetch new images.
I have an image on a webpage and when the user hovers over it, another image appears. When then hovering over the appearing image, it flickers.
Anybody any idea why that is?
Tony
UPDATE: The first image does not dissapear when hovering, just another (smaller) image appears over the top in the left top corner. When now moving over that smaller image, then the flicker appears.
The image on the site is part of a gallery, so it's a php variable and gets loaded when a user selects from a list of images. So embedding one into the other is very hard.
Because the browser is fetching the new image. The best solution is to incorporate both images into one, and either purely use CSS to change the background-position on :hover, or ( for IE6 and non-anchor elements ) change the background position with JS.
In IE? IE is notorious for not caching images that are loaded dynamically (either with CSS :hover or due to Javascript events). You can use CSS sprites (basically, using one image file to display both images, and using positioning to show one or the other; tutorial, linked by Mike Robinson), or you can use image preloading:
var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';
Edit: and other browsers will do the same on first load. IE just may continue to do it on every switch.
If I understand you right, you probably replace the src of your image every time the mouseover event is fired. So, even when your image is replaced, your event is fired and the image is replaced with itself, which may cause flickering.
I guess you're probably using IE. This is a bug with the way it implements caching in some versions. You fix it by either configuring your web server to send proper cache headers, or by using CSS sprites. I recommend the latter, as that means less HTTP requests, and the preloading works even without JS.