Use Javascript to upload images.

Question

Hi, I'm just wondering if this is possible. I have quite a few images on my site, and I made them as small as possible. Some images are used as slide shows, but they are all uploaded at once. Is there a way to use javascript so that the slideshow images are loaded last, to load background images, etc., and the slideshow is loaded at the end. Images are in the main text of the page and are "slide shows" using javascript. The code for these images is simple:

<div id="pics"> <img src="images/cs9.png" width="270px" height="270px" alt="teaching"/> <img src="images/cs1.png" width="200px" height="200px" alt="teaching"/> <img src="images/cs3.png" width="200" height="200px" alt="teaching"/> <img src="images/cs5.png" width="200" height="200px" alt="teaching"/> <img src="images/cs6.png" width="200" height="200px" alt="teaching"/> <img src="images/cs7.png" width="200" height="200px" alt="teaching"/> <img src="images/cs4.png" width="200" height="200px" alt="teaching"/> <img src="images/cs12.png" width="200" height="200px" alt="teaching"/> <img src="images/cs8.png" width="200" height="200px" alt="teaching"/> <img src="images/cs10.png" width="200" height="200px" alt="teaching"/> <img src="images/cs14.png" width="200" height="200px" alt="teaching"/> </div> 

Any idea would be great.

thanks

Answer 1

Change See the bottom of this answer. I had a much better idea.

Original answer

Yes, it’s possible. Others have noted plugins for this, which are great in that they undergo preliminary testing and such, but if you want to do it yourself, it is surprisingly easy. You add img elements to the DOM (document object model):

 function addAnImage(targetId, src, width, height) { var img; img = document.createElement('img'); img.src = src; img.style.width = width + "px"; img.style.height = height + "px"; target = document.getElementById(targetId); target.appendChild(img); } 

(I could not immediately remember how to set the alt attribute, perhaps it will be img.alt = "..."; )

Naturally, you want to add some error to it. :-) So, for one of your images you want to add them to div pics , for example:

 addAnImage('pics', 'images/cs12.png', 200, 200); 

Configure the function to add images and call them when the page loads (using window.onload or any other that supports your JavaScript library, if any, for something a little earlier). For example, your script loading might look like this (I usually do not use window.onload , but this is convenient for example):

 function pageLoad() { var images = [ {src: "images/cs9.png", width: 270, height: 270, alt: "teaching"}, {src: "images/cs1.png", width: 200, height: 200, alt: "teaching"}, {src: "images/cs3.png", width: 200, height: 200, alt: "teaching"}, // ..., make sure the last one *doesn't* have a comma at the end ]; var index; // Kick start the load process index = 0; nextImageHandler(); // Load an image and schedule the next function nextImageHandler() { var imgdata; imgdata = images[index]; addOneImage('pics', imgdata.src, imgdata.width, imgdata.height); ++index; if (index < images.length) { window.setTimeout(nextImagePlease, 200); } } } window.onload = pageLoad; 

When loading a window that will load the first image, and then schedule the next one to be loaded 200 ms (fifth of a second) later. When this happens, he will plan the next, etc. Etc. Until it loads all the images.

JavaScript libraries such as jQuery, Prototype, Closure, etc. usually have various helper functions for this kind of thing.

Updated Answer

This is good, but it means that you need to completely change the way your pages are arranged, and you need to mix content materials (image sources and sizes) with your JavaScript, etc. Blech.

How to do it: make all your image tags the same for the same image:

 <div id="pics"> <img src="images/w270h270.png" width="270" height="270" alt="teaching"/> <img src="images/w200h200.png" width="200" height="200" alt="teaching"/> <img src="images/w200h200.png" width="200" height="200" alt="teaching"/> ... 

These would be placeholders. Then add data attributes with a real image source to them:

 <div id="pics"> <img src="images/w270h270.png" data-src="cs9.png" width="270" height="270" alt="teaching"/> <img src="images/w200h200.png" data-src="cs1.png" width="200" height="200" alt="teaching"/> <img src="images/w200h200.png" data-src="cs3.png" width="200" height="200" alt="teaching"/> ... 

Attributes in the form of data-xyz will be valid with HTML5 (and they work today, they simply are not checked).

Now the magic: as soon as the main download is complete, you will go through the img tags in the DOM by updating their src to create your data-src attribute:

 function pageLoad() { var nodeList, index; // Get a NodeList of all of the images on the page; will include // both the images we want to update and those we don't nodeList = document.body.getElementsByTagName('img'); // Kick-start the process index = 0; backgroundLoader(); // Our background loader function backgroundLoader() { var img, src; // Note we check at the beginning of the function rather than // the end when we're scheduling. That because NodeLists are // *live*, so they can change between invocations of our function. // So avoid going past what is _now_ the end of the list. // And yes, this means that if you remove images from // the middle of the document while the load process is running, // we may end up missing some. Don't do that, or account for it. if (index >= nodeList.length) { // we're done return; } // Get this image img = nodeList[index]; // Process it src = img.getAttribute("data-src"); if (src) { // It one of our special ones img.src = src; img.removeAttribute("data-src"); } // Schedule the next one ++index; window.setTimeout(backgroundLoader, 200); } } window.onload = pageLoad; 

Again, you will want to add error handling and not fully test, but in principle this should work.

Answer 2

You can use jquery Lazy Load plugin

Answer 3

you can use lazy loading script. A good example is (jquery): http://www.appelsiini.net/projects/lazyload

Answer 4

In the onload event of the window, use document.createElement to create the images and element.appendChild to paste them where needed.

Answer 5

I think you could write javascript that will insert some tags after the page loads. Thus, the slide show will not interfere with the loading of the main content.