Today, I need to test some simple javascript coding to detect image manipulation. As we all know, we cannot detect Image width and height with javascript or jQuery before which isn't completely loaded. Now what I want to do is just put loading text and don't show image while it's not completely loaded. It's quite simple and I feel what I want to do might be useful for my future projects. Because I feel displaying image while loading is annoying and shouldn't be good for our clients. That's why I have an idea to do like that.
2<span id="loadText"></span>
3
4/* Below part is Javascript Coding */
5document.onreadystatechange=function()
6{
7 /*
8 if page/dom/image is completely loaded,
9 show image and remove loading text.
10 */
11 if (document.readyState == "complete")
12 {
13 document.getElementById("imageid").style.display = "inline";
14 document.getElementById("loadText").innerHTML = "";
15 }
16}
17/* hide image and display loading while loading */
18document.getElementById("imageid").style.display = "none";
19document.getElementById("loadText").innerHTML = "Loading...";

Android
Top of Page