I've been having a problem caused by the previous image staying on the screen until the next is loaded.
My program uses a flowchart where various images are needed for certain questions. I've been using the following code to change the source from one to another.
HTML:
<img class= 'right' id= 'imageBox' style= 'width: 20%; height: auto;' src= www.1stimage.com/>
javascript:
document.getElementById("imageBox").src = 'www.2ndimagesite.com';
If the computer has a slow connection, the first image could stay on the screen for up to 10 seconds before the next one shows up. How do I get it to not display anything until it's finished?
Thanks.
Preload the image and update the src after it's loaded:
var img = new Image();
var newsrc = 'www.2ndimagesite.com';
img.onload = function () {
document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;
You can change aproach a bit to achieve what you want.
You can preload images and after that just select what image to show. You can read more about this here: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
You can make start loading new image async and change current image to image like loading spinner or some image, which shows that something is loading at the moment (example: ) On onload handler you will rewrite this spinner to loaded image.
I wanted to write ~ same that #nedt wrote. Btw, I don't think that his code will help you. I think you will achieve same effect as you said in answer. Anyway, he was first and his answer was close, so I will just use his example.
document.getElementById("imageBox").src = "loading image link"; // load spinner
var img = new Image(); // load image asynchronously
var newsrc = 'www.2ndimagesite.com';
img.onload = function () { // onload handler
document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;
So, old image was loaded on page loaded. You did some action, for example pressed button. If you have low speed, loading spinner will be shown and after new image is loaded async, new image will be shown. If you have enought speed, new image will appear immediately.
Hope this will help you!
document.images[i].complete
will be true if picture[i] source is loaded.
you could preload all pictures an dont show it until the status change.
Related
I want to make a loading overlay, but instead using setTimeout I would like to show the "loader" until the first image is fully loaded on the webpage. ( After that, I would like to use lazy image loading )
Until now I used setTimeout, but it's not working really well. I can set a bigger time, but now there is a "gap" between the loader and when the image appears.
The picture urls are fetched from a wordpress API and I'm using template.
What I want is to show the "loading" overlay until the first image is fully loaded, so users don't see the blank state.
var img = document.querySelector("#img");
img.onload = function(){
document.getElementById("loading").style.display = "none"
}
I can't use jQuery because it's for a school project. I tried all the alternatives I found here by adding a console.log("loaded") when it's loaded, but nothing seems to work.
Maybe set the img.src after you defined onload
let img = document.createElement('img');
img.onload = function(){}
img.src = "url"
I have a page that swaps some fairly large images in and out. There are too many to preload when the page initially loads so that is not an option. So what I need to do is load them as they are requested by the user. Right now I'm using jQuery to replace the img's src. This works fine but the images I am loading can be around 500KB and it looks bad as they paint down the screen as they are downloading. What I'd like to do is pop a loading gif on the page when the image is in the process of loading then have the loading gif disappear once the image is loaded. I'm struggling to find a way to do that though. Here is the JS/jQuery code that I have that just replaces the src.
var product = "bowl";
var image = "dog.jpg"; //this is actually pulled from a data attribute, but its just hardcoded here for an example
$("#images img[data-product="+product+"]").attr("src", "/img/tablesetting/"+image);
I made a working jsfiddle showing this principle
http://jsfiddle.net/kasperfish/c72RT/4/
I recently needed to do the same thing. Basically I wrapped the image in a container div. within the container I've added a span element with my ajax loader gif embedded. this span has to be hidden initially but gets visible when an ajax request is made. The span gets removed when the image is fully loaded.
before ajax call
$('#your_image_container').find('span').show();
on success
$('#your_image').attr('src', 'your/image/url').load(function() {
$('#your_image_container').find('span').fadeOut();
});
I made a jsfiddle showing this principle
http://jsfiddle.net/kasperfish/c72RT/4/
Preload the image.
var product = "bowl";
var imageSrc = "dog.jpg";
var imgEl = $("#images img[data-product="+product+"]");
// show loading graphic only if it's needed
var timer = setTimeout(function(){
imgEl.attr("src", "/img/loading.gif");
},50);
// preload image
var img = new Image();
img.onload = function() {
clearTimeout(timer);
imgEl.attr("src",imageSrc);
}
img.src = imageSrc;
$img.attr("src", newImage);
if (!$img.get(0).complete) {
$img
.hide()
.after("<img src=throbber>")
.on("load", function () {
$(this).show().next().remove();
});
}
I want to make a JavaScript (jQuery), HTML gallery, which has like 60 pictures. I want them to load one by one. They are named 1.jpg, 2.jpg, 3.jpg... etc.
So I started with making a <img id="loader" style="display:none;" src=""/>
this contains the actually loading image, I give src for it with a script, then wait for it to load, then give the same src to its real destination:
<img class="active_pic" id="a1" src="img/load.gif"/>
When it is done I start loading the second picture. How do I do that?
I tried making it with a recursion, a function which calls itself, but it wouldn't wait for the image to load. I used this:
$("#loader").attr("src",pic);
$("#loader").ready(function(){$("#a"+active).attr("src",pic);
You can load your images from JS code with
var img = new Image();
img.onload = function() {
// do stuff after image is loaded
};
img.src = pic_url;
Update
JS function stub and usage example
<script>
function load_image(img_url)
{
// show overlay, spinner, whatever
var img = new Image();
img.onload = function() {
// add <img> tag
// hide overlay, spinner, whatever
};
img.src = img_url;
}
</script>
load image
you can use the onload event of the picture. But if your image is cached it will not work, so you can use it:
$('img[id|="a"]').each(function() {
if(this.complete) $(this).trigger('load');
});
var doOnLoad=function(){
var id=parseInt($(this).attr('id').substr(1));
$(this).removeClass("active_pic");
id++;
$('#a'+id).attr("src",pic[id]).one('load', doOnLoad).addClass("active_pic");
};
$(".active_pic").one('load', doOnLoad);
pic must be an array with id as key and src as value.
I'm having this issue with firefox, works perfectly on chrome.
I'm creating a slide gallery, and the user can click next or previous to switch between the images in the gallery. I'm trying to create a loading image in-between switching images while the user is waiting for the actually image to loading. The code I have currently to do this as follows:
function changePicture()
{
var imagevar = document.getElementById('theimage');
//display loading image
imagevar.src = "/img/LoadingPage.png";
//Load actual Image
var imgURL = <IMAGE PATH>
imagevar.onload = ShowImage(imgURL);
}
function ShowImage(imgURL)
{
var imagevar = document.getElementById('theimage');
imagevar.src = imgURL;
}
So the logic in there is pretty simple. Load the "Loading Image" when switching between images, when the "Loading Image" has finished loading then start loading in the "Actual Image". When the actual image is completed loading then it should be displayed.
In firefox all that happens is that the image will hang on the previous image while the next image is loading and when the next image is loaded it will display the new image. But the "Loading Image" never gets displayed/shown.
I've also tried to just out right hide the image until it is loaded and on the onLoad unhide it again. But all that happens is the Image will just hang on the previous image until the current image is loading, never actually hiding the image.
And all of these techniques work perfectly fine on chrome. Can someone help me out on how to get this to work on firefox or knows of a better way?
The problem is that your logic is operating on the same image element. Loading images are supposed to be separate from the image that's used to display stuff.
Here's code that loads a new image on the image element, and while that happens,we display the loading image somewhere until the other loads.
function showGalleryImage(path){
//get our placeholder
var theImage = document.getElementById('theimage');
//show our loading image. usually overlaying theImage
showLoadingImage(true);
//set our handler to check if loaded
theImage.onload = function(){
//when loaded, hide
showLoadingImage(false);
}
//start loading the new image
theImage.src = path;
}
function showLoadingImage(state){
//get our loading image placeholder
var loadingImage = document.getElementById('loadingImage');
//set our display states
var displayState = state ? 'block' : 'none';
loadingImage.style.display = displayState;
}
I am looking for the CORRECT way to do the following:
$("#some-image").fadeOut();
$("#some-image").attr("src", "new-src.png");
$("#some-image").fadeIn();
For timing purposes, the following sets it up closer, but I know this is still incorrect:
$("#some-image").fadeOut(function(){
$(this).attr("src", "new-src.png").fadeIn();
});
What is the correct way to do the following, in order:
Fade Image Out
After Image has faded, load a new src
After new image has completely loaded, fade image back in
Cheers!
Your problem may be that the new image doesn't load until after the DOM element containing it has already faded in. Ensure the image has fully loaded before calling fadeIn():
$("#some-image").fadeOut(function(){
var tgt = $(this),
img = new Image,
src = "new-src.png";
img.onload = function() {
tgt.attr('src', src).fadeIn();
};
img.src = src;
});
Even better, load the image ahead of time:
<script>
// Outside of $(function() {})
function preload_img(src) {
var img = new Image;
img.src = src; // loads immediately, maybe even before DOMReady
}
</script>
Then you won't have to worry about whether or not the image has been loaded when the user triggers your fadeIn/Out.
Use a callback function. Once the fadeOut completes, we change the src and fade the imagein after the src has been changed.
$("#some-image").fadeOut(function(){
//after the fadeout completes, change the src of the image.
$(this).attr("src", "new-src.png").fadeIn();
});