SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2003
    0 Post(s)
    0 Thread(s)

    Load text first then proceed to images?

    Hi Sitepoint members, mods and admin,

    I have a special question to ask you guys!

    Is there a way to make our website load the text and the homepage first? then proceed to load the images. So that the homepage will be shown in second and then the images will come in next. Is there a way to do that?

    The main purpose of this is to make our homepage load faster if you have some images needed to load on the homepage. Any good suggestions? I would be very appreciated.. Thanks.

    “Discover the Highly Effective & Proven Strategies on building your own 100% Highly Targeted, responsive Opt-in List."

    Simply subscribe to our Newsletter at:

  2. #2
    SitePoint Zealot thirdcherry's Avatar
    Join Date
    May 2003
    0 Post(s)
    0 Thread(s)
    I'm not sure if there is a specific way to accomplish this, but I can get you started.

    Make sure all the images on your page have their dimensions specified in their width and height tags of the image.

    <img src="myimage.gif" height="10" width="20">

    If each of these is specified, the parsing of the html can quickly get the layout of the page and put in outlined boxes the location of the images. This can shave a second or two off the time to load the page.

    Other techniques include slicing up your larger images so that their are several smaller files that load incremently, while there is not a specific speed increase, the visual perception is that the site is loading faster.

    Best Regards,
    Michael Wisniach
    3rd Cherry Designs

  3. #3
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    0 Post(s)
    0 Thread(s)
    I’ve been meaning to make a script like this for ages. Reading your post inspired me to knock something up at last.

    Here is the result:
    HTML Code:
    		<title>Preview Images</title>
    		<meta name="Author" content="Mr. Brownstone (" />
    	<script language="JavaScript">
    		function OnLoadImages ( ) {
    			var oImg;
    			for ( var i = 0 ; i < document.images.length ; i ++ ) {
    				oImg = document.images [ i ];
    				// If oImg is not null and a "?" exists in the URI...
    				if ( oImg && oImg.src.match ( /\\?/ ) != null ) {
    					// Split source URI in two from the "?", and use the second array element as the new source
    					oImg.src = oImg.src.split ( '?' ) [ 1 ];
    	// -->
    	<body onload="OnLoadImages ( );">
    		<img src="images/picture_preview.gif?images/picture_fullsize.gif" alt="This is a picture with a preview, or placeholder." />
    		<img src="images/picture_nopreview.gif" alt="This is a picture without a preview. It will be ignored by the script." />
    It works like this:

    Take a look at the src attribute of the <img> tag in the source:
    <img src="images/picture_preview.gif?images/picture_fullsize.gif" alt="This is a picture." />
    Notice the question-mark (underlined) between each picture location. The location on the left (blue) is your preview-image, the one on the right (red) is the one you want to load when the page finishes loading. If you do not want the script to load another image after the page loads, simply specify an image location as you would normally.

    The script works by scanning all <img> tags in the document after it loads. If an image has a question-mark in the URI, the script will split the URI in two from the position of this question-mark, and then use the second element of the resulting array as the new source for the image.

    Tell me if you experience any problems, or if my post is not clear.
    Last edited by Mr. Brownstone; Jul 1, 2003 at 12:06. Reason: Stupid vBB parser
    Of course, that's just my opinion. I could be wrong.


Posting Permissions

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