Using Javascript vs HTML to display images

Firstly, sorry for my incredibly noobishness, but I am just starting javascript and have a lot of questions.

1.) Would it be faster loading image through javascript or HTML?

I would assume HTML and also for things like, javascript enabled on browser, it would be safer to use HTML? I am just trying to figure out when it is better to use javascript vs CSS, jquery because the thing I'm working now seems very slow with jquery..

fiddle: https://jsfiddle.net/jzhang172/44v297n0/

    var img = new Image(100,200);
    img.src = "https://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951";

console.log(img);

    // This next line will just add it to the <body> tag
    document.getElementById('ok').appendChild(img);
img{
  height:300px;
  width:200px;
  border:1px solid green;
}
.ok{
  width:300px;
  height:300px;
}
I am but a HTML image<img src="https://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951" alt="">


<div id="ok">Hello, I was put here by Javascript</div>

Answers 1

  • Image loading time will be same for both but it may differ. You can check it in network tab. And you can use 'image complete property'.The complete property returns whether or not the browser is finished loading an image.


Related Articles