I have a website with a lot of images in it. I want some images load before another (because user will scroll to the last images). Let's say this is html:

<img src='img1.jpg'>
<img src='img2.jpg'>
<img src='img3.jpg'>
<img src='img4.jpg'>

How can I make img3.jpg and img4.jpg start to load after img1.jpg and img2.jpg loaded?

I have a website with a lot of images in it. I want some images load before another (because user will scroll to the last images). Let's say this is html:

<img src='img1.jpg'>
<img src='img2.jpg'>
<img src='img3.jpg'>
<img src='img4.jpg'>

How can I make img3.jpg and img4.jpg start to load after img1.jpg and img2.jpg loaded?

• javascript
• html
• image
• image-processing

4 Answers 4

I pletely agree with Steve Testa's answer - Mike Tupola's jQuery plugin is one of the best for so-called "Lazy Loading" - however, I recently stumbled upon a major improvement to the plugin. As Steve mentioned, Mike Tupola's plugin only works with images; fortunately, this plugin is called LazyLoadAny - which allows you to lazy load just about anything you want: https://github./emn178/jquery-lazyload-any

I recently used this on a product listing page where the client didn't pagination but didn't want them all to load immediately - its a great resource and easy to use. If you need further explanation just ask.

quick google search (http://www.cryer.co.uk/resources/javascript/script3.htm, page has example) provides a function to load another image after a previous image has finished loading:

<script type="text/javascript">
var loadingImage = false;

function LoadImage(imageName,imageFile)
{
  if ((!document.images) || loadingImage) return;
  loadingImage = true;

  if (document.images[imageName].src.indexOf(imageFile)<0)
  {
    document.images[imageName].src = imageFile;
  }
  loadingImage = false;
}
LoadImage('image0','number0.gif');
</script>

then use like

<img name="image0" onLoad="LoadImage('image1','number1.gif')">
<img name="image1" onLoad="LoadImage('image2','number2.gif')">

...and so on and so forth.

I would prefer a more lightweight plugin which loads images without the overhead of jQuery.

The justlazy library provides auto-lazy loading of images:

1. Define your placeholders:

<span data-src="img1" data-alt="some alt text 1"
      class="justlazy-placeholder">
</span>

<span data-src="img2" data-alt="some alt text 2"
      class="justlazy-placeholder">
</span>

2. Initialize lazy loading via javascript:

Justlazy.registerLazyLoadByClass("justlazy-placeholder");

The plugin will load the images when they get visible for the user. If they should load earlier, you can provide a threshold:

Justlazy.registerLazyLoadByClass("justlazy-placeholder", {
    threshold: 200
});

Now the specific image will be loaded 200 pixels before it gets visible in the viewport.

You're probably going to need to force a lazy load scenario with javascript. I personally am a big fan of Mike Tupola's jquery plugin. It will only load images if they're visible. That way if the user never scrolls down any images that aren't visible will never load.