How to load images after home page load

Question

I have a web page that displays 100 images in slider. I wish to display only 10 images when page load. After page load, the remaining 90 images should display..

you send only ten images from your php script, then in your js you run an ajax to load the rest — smarber, Nov 28 '16 at 09:50

score 2 · Answer 1 · edited May 23 '17 at 12:30

This would be called image pre loading and usually can be done in JavaScript or jQuery to load the images before hand so your images will load faster. Here is a how-to guide on pre loading images. JavaScript Preloading Images or checkout this guide which uses CSS and jQuery https://css-tricks.com/snippets/jquery/image-preloader/

Here is an example in jQuery. Enjoy!

$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");

Basically it calls these images to be used before the page is loaded and that will load the images into the cache making it faster when being called later in the browser.

Kindly provide an example to help the OP. – Rav Nov 28 '16 at 09:52 — Rav, Nov 28 '16 at 09:52
Yeah sorry about that :p – Steven Hammons Nov 28 '16 at 09:54 — Steven Hammons, Nov 28 '16 at 09:54

score -1 · Answer 2 · answered Nov 28 '16 at 09:58

-1

  $(document).ready(function() {
 //load rest of images here code
    });

answered Nov 28 '16 at 09:58

EJ207

49
1
3

Kindly provide an example and an explanation to the code. – Rav Nov 28 '16 at 10:09

How to load images after home page load

2 Answers2