Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts

    Simple preload image function

    Here is a javascript code snippet that will preload your images.
    Code:
    function preloadImages()
    {
      if(document.images)
      {
        if(!document.imageArray) document.imageArray = new Array();
        var i,j = document.imageArray.length, args = preloadImages.arguments;
        
        for(i=0; i<args.length; i++)
        {
          if (args[i].indexOf("#")!=0)
          {
            document.imageArray[j] = new Image;
            document.imageArray[j++].src = args[i];
          }
        }
      }
    }
    In order to use it just do the following by putting your images in to the function as attributes.
    Code:
    Example: preloadImages('file.gif', 'http://www.x.com/y.gif');
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #2
    Regular Coder
    Join Date
    Jan 2010
    Posts
    130
    Thanks
    52
    Thanked 0 Times in 0 Posts
    is this one can also preload a flash file?

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Uk
    Posts
    8
    Thanks
    0
    Thanked 3 Times in 3 Posts
    If you're looking for a way to speed up your web site's perceived load time, preloading your images may be your answer. By using the following JavaScript code, you can preload the images you specify prior to your web page opening. This will enable your images to promptly display instead of your visitors having to wait for them to load.

    Place this code between your <HEAD> and </HEAD> tags:
    <SCRIPT language="JavaScript">
    <!-- Script courtesy of http://www.-------.net - Your Guide to Professional Web Site Design and Development
    var preload=new Image();
    preload.src="(image.gif)";
    // -->
    </SCRIPT>
    Edit the text indicated in red to your image file name.
    ALL done :-)
    Last edited by abagnale47; 10-18-2011 at 07:19 AM.
    Regards,
    Abagnale
    Being an expert, I recommend you to check this site. you will find amazing preparation tips here:http://www.prep2pass.com/

  • Users who have thanked abagnale47 for this post:

    finoy_ako (10-18-2011)

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,293
    Thanks
    10
    Thanked 583 Times in 564 Posts
    @chris_hick:

    fnInstance.arguments is deprecated. use arguments instead.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,293
    Thanks
    10
    Thanked 583 Times in 564 Posts
    Quote Originally Posted by abagnale47 View Post
    If you're looking for a way to speed up your web site's perceived load time, preloading your images may be your answer. By using the following JavaScript code, you can preload the images you specify prior to your web page opening. This will enable your images to promptly display instead of your visitors having to wait for them to load.
    uhh, no, that's not right at all.

    if you indeed "preload the images you specify prior to your web page opening", then the user won't see anything while the images preload.

    so, it takes LONGER to see ANYTHING when you preload in the head like that. some browsers will que up several, so the hit might not be huge, but in all cases it will be slower than using <img> tags would be.


    the reason images are pre-loaded is not for perceived performance, it's so that image dimensions are known before rendering complex layout using JavaScript, or to cover up bad UI decisions like :hover-based rollovers with different image files...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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