JQuery for Preloading Images

Question

Okay so I have to make a website for my School's robotics team and I've installed a JQuery plugin for parallax scrolling, I learnt how to use it and frankly it was minimal use of JavaScript.

Although now I realized that my page is REALLY image heavy and it lags the site throughout the whole scrolling process, it just looks really bad. I've read many online descriptions for a preload, all with a similar layout although I still don't understand what I have to do.

Can anyone explain how a preload works and what information in what format I have to put it in?

Also if I was to have a preload loading interface, how would I integrate that? I have my .gif image, now what?

possible duplicate of http://stackoverflow.com/questions/476679/preloading-images-with-jquery?rq=1 — Marvin Emil Brach, Jun 24 '13 at 08:31

score 1 · Answer 1 · answered Jun 24 '13 at 08:27

1

why not use lazy load plugin for jQuery?

answered Jun 24 '13 at 08:27

jackchuka

72
2

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

If you are already using a jQuery Plugin, then just search for a jQuery Plugin which will preload images. One such plugin is jQuery Image Preload Plugin

This questions has also been answered already Preloading images with jQuery

edited May 23 '17 at 11:57

Community

1
1

answered Jun 24 '13 at 08:29

samazi

1,161
12
24

function preload(arrayOfImages) { $(arrayOfImages).each(function(){ $('')[0].src = this; // Alternatively you could use: // (new Image()).src = this; }); } // Usage: preload([ 'Contents/Backgrounds/BG1 Smaller.jpg', 'Contents/Backgrounds/FRC.png', 'Contents/Backgrounds/IMG_1732.JPG', 'Contents/Backgrounds/IMG_1740.JPG', 'Contents/Backgrounds/IMG_1747.JPG', 'Contents/Backgrounds/NOBGTemp.png', 'Contents/Backgrounds/Robotics4.jpg', 'Contents/Backgrounds/Gallery BG.png' ]); Like this? I'm sorry, I'm a noob >. – Mohammad Al-Ahdal Jun 24 '13 at 08:39

JQuery for Preloading Images

2 Answers2