Jquery, hide img onload

I want an image to be hidden when page just loaded. I can call $('#imgName').show() to show the image.

However, I had

$(document).ready(function() {
    $("#imgName").hide();
});开发者_如何学JAVA

But the image still flashes right at the start.

How do you get rid of this flashing effect?

Use CSS 'display: none;' to make it not visible on load.

This is because javascripts are loaded after html, the nearest possible solution is to use css

img#imgName{display:none}

Try using CSS to initially hide the image. The Javascript will load after the CSS, generally -- ergo, the initial flash.

You can load the image with it hidden using css.

display:none;