Solved

load images after loading the full HTML file

Posted on 2003-11-03
5
1,164 Views
Last Modified: 2007-12-19
I have a webpage with 10 images and some texts. I do not know the height and width of the (random) images, so I'm not using width and height in the IMG tag. But now it takes very long to display the full website, because the IE first try to get the width and heigh of the images (which are on other slow or down servers) and after this the IE loads and display the full HTML page.
Is there a way that the IE first load and display the HTML code and then try to display the images?
Perhaps there is a special META-TAG? Or a special IMG tag like Maxwidth and Maxheight force the IE to display the HTML page befor loading the images?

Thanks for your ideas!
Ben
0
Comment
Question by:bengore
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 9670589
The browser engine has to determine the placement of every object on the page (the page can't resize as it's being downloaded) so if you have anything below or beside the images, it needs to know the size of the image before it can render.

So, the speed of the download will depend in a large part on your layout. Other than some sort of scripting, the simplest method is to put the images at the bottom of the page.
0
 
LVL 6

Expert Comment

by:DoppyNL
ID: 9670835
adding the width and height of the images would solve the problem.

I don't know how you determine those random images; perhaps you can add the width and height to the list of urls that is allready stored somewhere.....
0
 

Author Comment

by:bengore
ID: 9671086
I solved the problem: I add this CSS:

<style type="text/css">
<!--

table.abba{font-family: Trebuchet MS,verdana,arial, helvetica;
      font-size: 10px;
      color:#C0C0C0;
      text-align:center;
      table-layout:fixed;
      width:800px;
      }
.abba td{width:400px;
      height:100px;
      }
td{font-family: Trebuchet MS,verdana,arial, helvetica;
      font-size: 12px;
      align:center;
      }
-->
</style>
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 10838081
PAQed, with points refunded (250)

Computer101
E-E Admin
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question