We Keep Coding

How do I change a .gif file to a .png file after a couple of seconds using javascript?

I have this line of HTML in my code:
<img src="https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png" id="site-logo" alt="Mundo New Impact">
and what I want to do is that, everytime an user loads any page from my website, this img loads a .gif file (which is: https://im3.ezgif.com/tmp/ezgif-3-d8b13ba46bfb.gif) for a couple of seconds, enough for its animation to finish, and then replace this .gif file to the original .png file.
I tried using this piece of javascript code, but it doesn't work:
function play(){
var img = document.getElementById("site-logo");
if (img.src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png"){
img.src = "https://im3.ezgif.com/tmp/ezgif-3-d8b13ba46bfb.gif";
}else{
img.src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png";
}
setTimeout(function(){end()},10000);
}
function end(){
document.getElementById("site-logo").src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png";
}
What am I doing wrong? I am a total noob so help me please!

You need to call play()in order to run the function.
You also have mistakes like if (img.src = ... instead of if (img.src == ....
I would work with event handlers, like, show the GIF animation and when the document ready event triggers, change the GIF to a different image.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var img = document.getElementById("site-logo");
img.src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png";
});
</script>

Image load event not triggering on iPhone (IOS)

I have a very simple code snippet to set a background image of an element once the image has loaded on a new image object.
var img = new Image();
var myelement = document.getElementById('myelement_id');
img.addEventListener('load', function(){
myelement.setAttribute('style', 'background-image: url(/public/images/myimage.jpg)');
});
img.src = '/public/images/myelement.jpg';
This question has already been asked a few times but answers have not been satisfying.
It's not the size of the image. The load event isn't fired no matter the size or format of the image.
The error event is not fired neither. Some people suggested that the error event will be fired instead of the load event on IOS.
It's not the browser. It's IOS. The behaviour is the same on Safari or Chrome on IOS.
It's not observable with BrowserStack. The image loads fine on BrowserStack yet a physical device is incapable of firing the load event.
I do assign the function first and thereafter set src to trigger the load event.

This seems to be working for me. But I am not sure whether changing the add event listener to the .load event made the difference.
function imgLoad(_imgDOM, _imgID){
_imgDOM.setAttribute('style', 'background-image: url(/public/images/load/' + _imgID + '.jpg)');
}
var imgLoadArray = document.querySelectorAll('.img__load');
for (var i = 0; i < imgLoadArray.length; i++) {
var imgDOM = imgLoadArray[i];
var imgID = imgDOM.getAttribute('id');
var img = new Image();
img.onload = imgLoad(imgDOM, imgID);
img.src = '/public/images/load/' + imgID + '.jpg';
}

Load two images in a single img tag one after another

I want to load two images in a single <img /> tag. First small image will be shown by src attribute and second large image will be inside data-src attribute but one image will be shown at once, that will be in src attribute. I want when page load small image will be load and show first and after completing loading of large image in the background it will be replaced by small image so that we can see large image. I have the code that will take large image from data-src attribute and place large image in src attribute.
$(document).ready(function(){
$("#image4").load(function(){
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} }
});
});
I want to do this because I don't want to wait for long time to load large image, instead I want to see the small image first. I am facing the problem when page load, it's loading small and large images in parallel. For your information images have the drag and zoom functionality.
Current live code is here: http://virtualepark.com/new1/demo.html

The code you posted here is not deployed on your server - there is some other stuff using the mousewheel-event.
Try loading the big image hidden in the background and once its loaded, set the url of the visible image:
//get all images
$('img').each(function(i, img) {
var img = $(img);
//if they have a data-src
if(img.attr('data-src')) {
//register for the load-event for the initial image
img.one('load', function() {
//if small image is loaded, begin loading the big image
//create new hidden image
var hiddenImg = new Image();
hiddenImg.onload = function() {
//if the hidden image is loaded, set the src-attribute of the
//real image (it will show instantly)
img.attr('src', img.attr('data-src'));
};
//trigger loading of the resource
hiddenImg.src = img.attr('data-src');
});
});
});
(credits to Load image from url and draw to HTML5 Canvas)

you can load to hidden tag and after load complet change them.

you can try to start the loading after the image is loaded.
$('img').load(function(){
var bigImgSrc = $(this).data('src');
var img = $(this);
if(bigImgSrc != img.prop('src')){
var bigImg =$('<img>').prop('src', bigImgSrc);
bigImg.load(function(){
img.prop('src', bigImgSrc);
});
}
});
I'm not 100% sure if you need to append the bigImg to the DOM or if it also loads like this. If you need to add it to the DOM use bigImg.hide().appendTo('body') and then use the remove funtion when loaded.
You should also be aware that the load-function not work in all cases, see https://api.jquery.com/load-event/
edit there was in an infinity loop in the prev. code example

How to load an image asynchronously?

I'm loading an image onto a texture map with GLGE (sorta like webGl). However for the sake of loading speed I'm loading a low resolution image first (which would be quicker) and then want to change the src to the high resolution image once the large image is loaded. This is what I'm doing now
var texture = new GLGE.texture();
function updateTexture(){
var image=new Image();
image.src = "models/testLargeMap_map0.jpg"; // load image
image.onload = function(){
texture.image("models/testLargeMap_map0.jpg"); // supposedly swap image on load (not working as I thought)
}
}
However, when during this period of changing the src, the model and all its functions freeze. How do I make it load the image asynchronously and on load swap it to the higher texture for a smooth instantaneous texture change?

You can set an image.onload event handler like this:
var big_image = new Image();
big_image.onload = function () {
texture.image("models/testLargeMap_map0.jpg");
}
big_image.src = "models/testLargeMap_map0.jpg";
(Note that I set the onload handler first, then set the src attribute. If I do it the other way around, it fails in IE).
This will preload the image before calling texture.image. I don't know anything about this library though, so I can't be certain it will use the pre-loaded image.

The image.src will be requesting the image from the server and it will initiate the onload event, and again u are requesting the image to be swapped so it is getting freezed. Why do you need this approach. You can have better way of doing this like, allow the low resolution image to be loaded first then assign the onmouseover or onclick event for the image on that time u can show a popup like shown on google images and then in it just display the high resolution images. On that time u will be requesting a single image the process will be quicker.
Hope this helps you

I'm not familiar with "GLGE" but it looks like the problem is that the method .image() loads the image again (kind regardless if that happens in the load event handler for the same image).
So unless you can set the image reference directly, like
texture = this; // within the load handler
there is no way to accomplish it with this library.

Detect if objects are loaded [Javascript]

I was wondering, is there a way to detect if a certain image / div is loaded?
For example when i am loading two heavy images and showing a loading sign at the two places the images will later occupy, is there a way to already display the first image when it's loaded while still loading the second one?

myImage.addEventListener('load', function() { ... }, false);
Code inside the above function will be called when the image is finished loading.

If you are using new Image to preload images, then you can do the following to be notified of then it is loaded
var img = new Image();
img.onload = function() {
//display the image
document.getElementById("myDiv").innerHTML = "%3Cimg src='myimg.jpg' alt=''/%3E";
};
img.src = "myimg.jpg";
Remember to set the src after the onload.

if an image is done loading, its .complete property switches to true.