I'm trying to load in some decently large images into a web application. The largest of these images can be 2800x2800. I load them in, display, and everything works fine.
My problem is, once they are loaded using:
var img = new Image();
img.src = 'myImageURL';
img.onload = function(){
//display image
}
The large images display on the page progressively, from top to bottom as if they are being loaded.
I want to remove this visually, and only display them once fully loaded and rendered in the browser.
I cannot change the image sizes either, because this web app is intended for the user to scale the images, all the way up to 100% of original size, so I must load the full 2800x2800 and resize it small.
Does anyone know how I could hide the image until it's rendered? I can hide it until loaded, but that's basically what I'm doing and it's the progressive render display I want to remove.
Thanks
Use the onload attribute on the <img> tag, something like this:
<img src="huge.jpg" style="display:none" onload="this.style.display='block'">
Substitute whatever you want for effects, but onload is your hook.
Demo: http://jsfiddle.net/DfCUQ/1/ (note: update the ?nocache=X in the demo for each time you load it)
You could make the css visibility to 'hidden' and have some text (or loading spinner, etc) in the place of the image until the onload event gets called.
Related
I am working on a website that has image blocks, with various sizes (relative width based on the current size of the parent, parent also have a relative size to window). I use jquery load event to rewrite the src attributes of the images based on the image object's dynamic size to ensure pixel perfect view. The problem is that the browser download the full size image, than replace it with a dynamically generated one. This leads to unnecessary loadings and speed loss.
What if I let the src value empty, that add the correct url into it? I would like to stay seo optimized, so an empty src maybe not a good idea. Can I achieve this without double downloading images? Maybe I should use an event before the browser begins the download the src data.
My code:
$('.image').load(function () {
if (!$(this).hasClass('optimized')) {
$(this).attr('src', '/image-perfection.php?image=' + encodeURIComponent($(this).attr('src')) + '&width=' + $(this).width());
$(this).addClass('optimized');
}
});
Create a small thumbnail, and let your images to point to the same thumbnail image.
The advantage of this is that you can specify a 'loading' like image that will be pre-catched by the browser for next requests, and then you can load the images the way you do.
You can also write a proxy script that cut the images in the server for you, if you're working with uploaded images you can cut them once they're uploaded for optimize the process, of course it depends of how your implementation must be.
i am programming a jquery plugin which loads lots of images.
I would prefer to show the picture first fuzzy and if it's fully loaded, in complete.
Facebook is a good example.
How does this technique work?
This depends on the format that the image is saved in.
JPG images normally load (and hence display) from top to bottom. If however they are stored in progressive (also called interlaced) format then they will load the whole image in a grainy format and gradually increase the quality. Facebook save their images in the progressive format.
There are utilities available for converting from the first format into the second. Here is a link to a well known one (ImageMagick): ImageMagick
You just have two images: one of bad quality, and one of good quality and.
When you want to show image, you first set image.src to bad quality image, and then instantly to good image path (setTimeout with 0 delay will work too).
It works, because browser doesn't replace image in img tag until it's fully loaded. Image with bad quality will loaded much faster than good image, so user will first see fuzzy image and fully loaded image when it's loaded.
Example
img.src = 'path/to/fuzzyImage.jpg';
setTimeout(function() {
img.src = 'path/to/fullImage.jpg';
}, 0);
The usual approach is to set width and height on a thumbnail version of the image to full size of the big image, and replace the thumbnail with full image when the large one is loaded. When you set the full size on the thumbnail image, it becomes 'fuzzy' becuase it's interpolated to a larger size by the browser.
I'm making a map that when you put mouse over a name in a list the <img>of the map change the src attribute to the map image with that zone highlighted, I only use the .attr() method of jquery to change it like this.
$("img.map").attr("src","newmap.png");
It works great in all browser but firefox, when the image change, first the old one disappear then there's a short time when there is nothing displayed and then the new image appears, how could I do this change smoothly in firefox like chrome or IE do??
(The time is really short but when moving the mouse through the directory the image disappear for the whole time the mouse is moving).
Or may be you know a better way to accomplish that effect. Thanks
Try preloading your images. The blink occurs as the new image is being loaded by the browser.
This happens because the src attribute has obviously changed. Well, the new image has not been downloaded yet. So it has to send a request to the server and wait for the response all while the src attribute has already changed. This is why you see nothing there for a bit. There are ways around this. In JavaScript, create a new image element with the new image as it's source. Add an onload event handler that will change the src attribute of the image you really want to show. Yes, this may be a bit more difficult the preloading, but it will decrease the initial page load time and it won't clutter your HTML.
Off the top of my head a combination of hover intent and a background image would help this.
The hover intent is good because you don't want to be downloading images unnecessarily.
If you give the containing div (or even the image itself) a background image of the original or last viewed image the flicker effect would be lessened. I suspect the load times for these image changes could vary so you could use this as an opportunity to show some sort of loading icon as well.
Having said all that I think it makes more sense to have the original image and then add a new image each time you hover an area. That way you can only add the image element when it doesn't already exist (saving http requests) and even do more graceful changes (fading over the original for instance)
Hope that helps!
The problem is that the browser is downloading the image when you first reference it, and not before.
I'd simply have two image elements and hide/show them instead of changing the src attribute of a single element.
I have many images inside of a scrolling DIV for an image gallery and the images are only loading when they become visible in the DIV after you scroll down. This is causing the DIV to freeze trying to load the images. Is there any way that I can fix this? I'm sure it would probably be javascript related.
Just my simple DIV.
<div style="width:275;height:400;overflow-x:scroll;">
content
</div>
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
You can pre-load the images with javascript
You need to preload the images.
Try this way if you don't want to use Javascript.
Yes, and in fact there are many related libs for this purpose. mostly for bandwidth saving purpose for old browsers, but will do the same work as you wanted here.
http://yuilibrary.com/yui/docs/imageloader/
http://www.appelsiini.net/projects/lazyload
at the same time, if your image are very big in size and you have a very long line of them, remember to hide (display: none) them after they become invisible from view.
Try using this lazy load script which will load the images before fixed number of pixels before they reach the visible area. This has many options
http://www.appelsiini.net/projects/lazyload
function expandDiv(idOfDivElement) {
divObj = document.getElementById(idOfDivElement);
var imageObj = document.createElement('img');
imageObj.setAttribute('src', 'path/example_image.jpg');
divObj.appendChild(imageObj);
// your expand div code here
}
Lots of cameras are now putting thumbnails into their JPEGs and RAWs images.
I'd like to be able to autoload some images and then display only the thumbnail, or better yet autoload only the thumbnail portion for speed.
Is there a way to do this in Javascript?
Thanks.
You've said you want to do this in the browser, so when you say:
...or better yet autoload only the thumbnail portion for speed.
You're not going to get a speed benefit from doing this client-side, because the entire image must first be downloaded before you can make a thumbnail for it.
You can create thumbnails for retrieved images, just by creating an img element and settings its width and height to something smaller; the default thing browsers will do is scale the image down (not necessarily in a pretty way).
Example:
var img = document.createElement('img');
img.src = "your image url here";
img.style.width = "32px"; // Change as appropriate
img.style.height = "32px"; // Change as appropriate
document.body.appendChild(img); // Or append to some other container element
Live copy
There I've assumed it's apprpropriate to force the image to be a certain width and height (frequently with thumbnails, it's useful if they're all the same size, although the above will mess with aspect ratios).
If you want to resize by a percentage (say, 25%), you can do that but it's more complicated: You have to create the image, load it off-screen (there are various ways to do this), wait for the load to complete, and then do the calculation.
If you're running a server, you're probably better off finding something that can pre-process the images and create thumbnails for you. ImageMagick, for instance, can help with that server-side.