I have an HTML page with some javascript functions.
It basically does this...
I have some images with transparent backgrounds (.png), I use the z-index property to sovrappose each image to the others so that I can assemble a new image.
With some buttons you can activate the javascript that makes a substitution of some images with the other.
Maybe an example will help you to understand the situation better:
Imagine a car. You have three images: glasses, wheels and body.
Each image has a transparent background so that if you see all the images together you can see the whole car.
With a button you can substitute the wheels image with another wheels image so that you can see more "versions" of the same car without creating an image for every combination (i have 345 possible combinations so this is the only way).
It works very well but it's slow :(
When I have to change only one piece, the substitution happens immediately, but when I have to change many pieces with only one click, it loads the images slowly so that it's a horrible effect.
What I need is a loading bar/wheel that appears over every other image and that disappears when the browser finishes loading the composite image.
I tried to search the web for a solution, but I only find solutions for loading the whole page. But in my case, the page doesn't change, only the inner images change.
How can I resolve this problem?
Thanks in advance,
marco
Related
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'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
Simple question, really. I just don't have the knowledge to do this with JavaScript, and to also make sure it works with (almost) all browsers...
I am going to design a set of images of a person pointing with one hand in several directions. (Up, down, left, right, diagonal, etc.) Basically, this puppet will be pointing at the location of the mouse. To do so, I want to use an animated GIF file to contain all the images and then use JavaScript to bring the right image to the front, based on the position of the mouse in relation with the image.
My knowlegde of Javascript is very limited, though. Before I even start creating the GIF images, I want to know if it's possible and if there's a solution that would work on any web browser. (Unless it doesn't support JavaScript, of course.)I know it's possible to delay an animated GIF from JavaScript but is it also possible to modify the exact image that needs to be displayed?
As far as I know, this is not possible.
Stuff like this is usually done using the "CSS sprites" technique, where the various stages are glued next to each other into one giant image. That image will then be used as background-image in a smaller element. background-position will determine which image is shown.
Whether this works for you will depend on whether your images are all the same size or not. It has the advantage of working reliably in all browsers, even IE6.
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.