10 examples of 'show loading image while page loads using javascript' in JavaScript

182
function handleImageLoad() {
183
  setImagesLoaded(prevImagesLoaded => prevImagesLoaded + 1);
184
}

15
function showImage(img) {
16
  document.querySelector('#result-image').src = img;
17
}

44
function showImage()
45
{
46
    if (imageCount >= images.length) {
47
        allImagesShown();
48
        return;
49
    }
50
    InspectorTest.evaluateInPage('addImage("' + images[imageCount].join('", "') + '");');
51
    imageCount++;
52
}

172
export function setLoadingScreenVisible(shouldShow: boolean) {
173
  document.getElementById('overlay')!.style.display = shouldShow ? 'block' : 'none'
174
  document.getElementById('load-messages-wrapper')!.style.display = shouldShow ? 'block' : 'none'
175
  document.getElementById('progress-bar')!.style.display = shouldShow ? 'block' : 'none'
176
}

259
function image_load (image) {
260
	image_n = images.indexOf(image);
261
	var group = image.split("_")[1].split(".")[0].replace(/^[0-9]|[0-9]$/g, "");
262
	if (image == "sc_system2.png") {
263
		var map = "system";
264
	} else {
265
		var map = "pn";
266
	}
267
	document.getElementById('screen').innerHTML ="<IMG class=\"screen1\" src=\"infohtml/" + LastIMG + "\" border=\"0\" usemap=\"#map_" + map + "\">";
268
	document.getElementById('screen2').innerHTML ="<IMG class=\"screen2\" src=\"infohtml/" + image + "\" border=\"0\" usemap=\"#map_" + map + "\">";
269
	document.getElementById('info').innerHTML = "<CENTER>" + group.toUpperCase() + " (" + (image_n + 1) + "/" + images.length + ")</CENTER>";
270
	fade_val = 0.0;
271
	document.getElementsByClassName("screen2")[0].style.opacity = fade_val;
272
	image_fade();
273
	LastIMG = image;
274
}

145
function showImage(i) {
146
    var slides = document.querySelectorAll(".slide"),
147
        l = slides.length;
148
    if (i > l) {
149
        index = 1
150
    } else if (i < 1) {
151
        index = l
152
    }
153
    slides.forEach(function(item) {
154
        item.style.display = "none";
155
    });
156
    slides[index - 1].style.display = "block";
157
}

49
static showImage (image) {
50
	const directory = `${this.engine.setting ('AssetsPath').root}/${this.engine.setting ('AssetsPath').gallery}/`;
51
	this.instances ().find ('figure').style ('background-image', `url('${directory}${this.engine.asset ('gallery', image)}')`);
52
	this.instances ().find ('[data-ui="image-viewer"]').addClass ('modal--active');
53
}

10
function imgIsLoaded() {
11
	if(document.getElementById("myImg").width > 0) {
12
	  window.clearInterval(waiting);
13
	  imgShowWidth();
14
	}
15
}

169
function showHideLoadingScreen(bShow)
170
{
171
	document.getElementById("loading").style.display = bShow ? "block" : "none";
172
}

209
onLoadIframe() {
210
  console.log("iframe onload");
211
  let iframe = document.querySelector('#iframe') as HTMLIFrameElement
212
  if (iframe.src == 'http://localhost:3000/') {
213
    iframe.style.display = "none";
214
  } else {
215
    iframe.style.display = "block";
216
    (document.querySelector('#loading') as HTMLElement).style.display = "none";
217
    (document.querySelector('mat-progress-bar') as HTMLElement).style.display = "none";
218
  }
219
220
}