SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru Dashman's Avatar
    Join Date
    Jan 2006
    Location
    Manchester, UK
    Posts
    627
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Preload images that are already in a page

    Hi guys.
    I am not sure if what I am about to ask is possible, but here goes.
    Basically, we have a load of pages (about 60 to be exact). Now, all of these pages contain a bunch of images that have been hard coded into the page.

    What I am aiming to do, is write a script that will preload these images, with a loader image being displayed while they are loading. if the user has JS disabled, then the images will just load as usual (as they do now).

    Is this possible? Or will I need to remove all the images and load them via AJAX and DOM?

    Cheers,
    D

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Preloading an image means that you load a picture into the memory, so if you need to view the image immediately, the browser doesn't have to download the image anymore (which takes time).

    Preloading an image on a page that will use the image immediately on screen is superfluous. The browsers downloads the displayed images right after the DOM has finished loading, while an onload event is fired after the whole page is loaded (including images).

    So if you want to preload the images on a page, you'll need to use an ondomready event, where you do the same thing the browser will do automatically, but faster. You can find the ondomready function in prototype and jquery.

    If you want to preload images for another page, you can search for all the links in the current page, read those pages with an XMLHttpRequest, get all the image-tags from that file, and load them dynamically.
    But this can slow down your website a whole lot, plus, if a visitor only views one page and leaves, all the used bandwidth to preload the images was a waste.

    If you want to display an animated gif or something instead of the actual image, you can replace all the image sources with that image, load them, and on every img.onload replace the animated gif with the loaded image.
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    SitePoint Guru Dashman's Avatar
    Join Date
    Jan 2006
    Location
    Manchester, UK
    Posts
    627
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ... thanks for the reply.

    I have tried using a function I wrote to get all the images by tag name and their attributes (src, width, height) and replacing them:

    I have then used Brothercake's domready function to try and run the script before anything loads (as you described)

    HTML Code:
    function prepareImages(){
    
        var images = document.getElementsByTagName('img');
    
        var imageObj = new Image();
    
        var i;
    
        for(i=0;i<images.length;i++)
        {
    
    
            var thisImage = images[i];
            
            // get all existing images in the document
            var originalSource = thisImage.getAttribute('src');
            var originalHeight = thisImage.getAttribute('height');
            var originalWidth  = thisImage.getAttribute('width');
    
            var source = thisImage.getAttribute('src');
            
            // set the source to the loader gif, and set dimensions
            thisImage.setAttribute('src','/img/common/loader.gif');
            thisImage.setAttribute('width','20');
            thisImage.setAttribute('height','20');
            
            // when the image has finished loading, then replace the loader gifs with the original image
            thisImage.onLoad = function(){
                alert("hi there: " + thisImage.src);
                thisImage.setAttribute('src',originalSource);
                thisImage.setAttribute('width',originalWidth);
                thisImage.setAttribute('height',originalHeight);                    
            }
        }
    }
    
    function domReady()
    {
        this.n = typeof this.n == 'undefined' ? 0 : this.n + 1;
        if
        (
            typeof document.getElementsByTagName != 'undefined' 
            && (document.getElementsByTagName('body')[0] != null || document.body != null)
        )
        {
    
            prepareImages();
        }
    
        else if(this.n < 60)
        {
    
            setTimeout('domReady()', 250);
        }
    };
    
    domReady();
    I reckon I am not doing omething correctly, as the images briefly appear, and then the loader gif image displays permanently. Please take a look and let me know what I am doing wrong.

    Cheers,
    D

  4. #4
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you really want to do this...
    By using jQuery you have a better ondomready function.

    Code JavaScript:
    function prepareImages(){
        var images = document.getElementsByTagName('img');
     
        for(var i=0,l=images.length;i<l;i++) {
            var thisImage = images[i];
            var imgObj = new Image();
     
            imgObj.reference = thisImage;
            imgObj.src = thisImage.getAttribute('src');
            imgObj.oldSrc = thisImage.getAttribute('src');
            imgObj.oldHeight = thisImage.getAttribute('height');
            imgObj.oldWidth = thisImage.getAttribute('width');
     
            thisImage.setAttribute('src','loader.gif');
            thisImage.setAttribute('width','20');
            thisImage.setAttribute('height','20');
     
            imgObj.onload = function(){
                var div = document.createElement('div');
                div.innerHTML = "Loaded: "+this.oldSrc + " " + this.oldWidth;
                $(div).prependTo(document.body);
                this.reference.setAttribute('src',this.oldSrc);
                this.reference.setAttribute('width',this.oldWidth);
                this.reference.setAttribute('height',this.oldHeight);                    
            }
        }
    }
     
    $(document).ready(function(){
        var symbol = new Image();
        symbol.src = "loader.gif";
        symbol.onload = prepareImages;
    });
    FOR SALE: 1 set of morals, never used, will sell cheap


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •