CODEWITHSUNDEEP
javascriptjquery
Deep
Deep

Reputation: 3076

delay images for display purposes not efficiency using javascript?

I have run into numerous sites that use a delay in loading images one after the other and am wondering how to do the same.

So i have a portfolio page with a number of images 3 rows of 4, what i want to happen is for the page to load,except for the images in img tags. Once the page has loaded i want images 1 of each row to load then say 0.5 seconds later the next image in the row(s) and so no. I'm going to have a loading gif in each image box prior to the actual image being displayed.

I know its doable but cant seem to find the term for doing this. This is purely for looks as it is a design site.

Thanks for the help.

Upvotes: 2

Views: 775

Answers (4)

RobG
RobG

Reputation: 147403

You really don't need javascript to do this. If you specify the image sizes in the HTML or CSS, the browser will layout and display the page while loading the images, which will likely be loaded in parallel. It will then display them as soon as it can.

That way if users re-visit your site and have the images cached, they all show up immediately. If you have a script to load the images after a delay, you are making visitors wait for content unnecessarily and all their efforts to have a faster browser and pay for a fast internet connection has gone to waste.

Upvotes: 0

Gary Green
Gary Green

Reputation: 22395

This is very easy to do in jQuery

$('img').each(function(i) {
    $(this).delay((i + 1) * 500).fadeIn();
});

Fiddle: http://jsfiddle.net/garreh/Svs7p/3

For fading in rows one after the other in a table it just means changing the selector slightly. Remember to change from div to img -- I just used div for testing

$('tr').each(function(i) {
    $('td div', this).delay((i + 1) * 500).fadeIn();
});

Fiddle: http://jsfiddle.net/garreh/2Fg8S/

Upvotes: 1

Ben Roux
Ben Roux

Reputation: 7426

The easiest way I can think to do this is to have a table set up that will eventually hold the image tags, but have none on load. Javascript can loop through an array of image urls, and insert those image tags into random locations on the table.

If you want to have the delay, setInterval is the perfect tool. http://www.w3schools.com/jsref/met_win_setinterval.asp

// You can hard-code your image url's here, or better still, write
// a server-side script that will read a directory and return them
// so it is fully dynamic and you can add images without changing code
unpickedImages = array();

// Start loading
loadAllImages = setInterval( insertImage, 600 );

function insertImage() {
    if( unpickedImages.length > 0 ) {
        var imageUrl = unpickedImages.shift();

        // pick empty x, y on your table

        // Insert the image tag im that <td></td>
    } else {
        clearInterval( loadAllImages );
    }
}

Upvotes: 0

Ibu
Ibu

Reputation: 43810

Here is what you can do, you can load the image tags with out the src and using a custom property:

<img alt='The image' path='image/path.jpg' />

then you can use javascript to load the images when the site is loaded or whenever you please;

// simplified
window.onload = function () {
  var images = document.getElementsByTagName('img');

  // loop and assign the correct
  for (var i =0; i < images.length;i++){
    var path = images[i].getAttribute('path');
    images[i].src = path;
  }
}

I hope you get the concept of how the images are delayed

**please note the path attribute is not a standard one.

Upvotes: 0

Related Questions