On typical html page, I have images using img tag with height and width already defined, so the browser doesn’t need to wait until it loads image and gets its dimension. But still, at the time when page is loaded, it doesn’t leave the space specified in image and resizes the page after images are completely loaded.
How can I force browser to leave the space even if image is not completely loaded during page rendering.
And also, now suppose if I have broken url on the page, will the browser leave its space or not?
When you specify width and height for an image, in HTML markup or in CSS, browsers will use those dimensions in page layout and will rescale (if needed) the image to fit those dimensions. Observations about situations where this does not happen need to be analyzed, first making sure the dimensions have been specified properly, then that they have not been changed (in client-side JavaScript). The page you mentioned has 986 markup errors, according to the W3C Markup Validation Service, and although most of the issues are formal, they may contain errors that affect rendering.
If the
srcattribute value does not refer to an image, browsers are expected to render the value of thealtattribute in place of the image. The way they do this varies by browser. Modern browsers generally use the dimensions specified for the image (possibly truncating the text if it does not fit), so the overall layout is the same as if the image were there.