Javascript Tip: Use Width and Height for Images

Let's talk about some dynamic content in HTML. Suppose we have a div:

< div id="div1">< /div>

And we need to render an image dynamically from inside this div (for example during page load). The small trick I'd like to share is to use width and height attributes for this image (even when we use original size without stretching the image). Like so:

var div1 = document.getElementById("div1");
div1.innerHTML = '< img src="some-url" width="200" height="175" />';

The image will load faster and it won't move or shift other HTML content therefore will provide better experience for the user. Enjoy :)

Related Posts:

• Javascript: Cross-Browser XMLHttpRequest Implementation