CODEWITHSUNDEEP
javascripthtmlimage
tjons
tjons

Reputation: 4769

Improve image load time

I have a few img tags whose src is changed onmouseover. This takes an inordinate amount of time to load. How can I improve the load time? The images are basically just different icons.

Upvotes: 1

Views: 862

Answers (3)

Asim Mittal
Asim Mittal

Reputation: 101

What you're trying to do is achieve a rollover. It is strange that you'd experience a very long delay in this process. Usually, if the images aren't stored in some remote location, they're pretty fast.

Look at this article for some guidance

Other things you could try: - sprites in css - you could use two overlapping divs and hide one and unhide the other and vice versa

Upvotes: 1

jonsuh
jonsuh

Reputation: 2875

There are a few ways to do it, the ideal solution in your case would be to use CSS sprites considering they're icons. However, depending on the situation sometimes sprites aren't ideal.

Here's one solution using JavaScript to preload images:

var images = new Array();

function preload() {
  for (i = 0; i < preload.arguments.length; i++) {
    images[i] = new Image();
    images[i].src = preload.arguments[i];
  }
}

preload(
  'http://image-1.jpg',
  'http://image-2.jpg',
  'http://image-3.jpg'
);

Upvotes: 1

Tyler McGinnis
Tyler McGinnis

Reputation: 35276

You can do a few things.

1) CSS Sprites is probably the preferred method.

2) You can load the images in a div and set that div to display none, making it so the images are already loaded so on mouseover they'll be there instantly.

Also here's a link on how to PreLoad images with CSS

Upvotes: 3

Related Questions