checking if image is fully loaded - javascript

I am using
if (document.getElementById('<%= MainImg.ClientID %>').complete) {
hideLoadDiv();
}
to hide a div which indicates the image is not loaded yet,
but it hides before the image has finished loading and is shown, while the browser is giving me a message that the page is still transferring data from the server :S
Is there another function I can use to make sure that the image is fully loaded?

You can use the onload event on the image iteself:
<img src="foo.jpg" onload="hideLoadDiv();" />
Update: looks like your question is a dup

javascript
img = new Image();
img.src = "foo.bar";
img.onload = function() {stuff();};

img = new Image();
img.onload = function() {stuff();};
img.src = "foo.bar";
src should go last

Related

Get new image to only appear when loaded if source changed

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.

Image preloader one by one for gallery? What is wrong with this?

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.

jquery image preload vs javascript

i'm tring to find the best way to preload image for a carousel
in my jquery function i do
$('<img />').attr({ 'src': imgurl }).appendTo(currentli).hide().load(function() {
console.log("preload!");
});
searching for the best way to do it, i found old 2008 questions where it was suggest to use
var img = new Image();
img.src = imgurl;
document.body.appendChild( img );
img.onload = function() {
console.log("preload!");
}
any difference using jquery and javascript? any other suggestion?
yeah, wait until the window is ready with the the window load event, and then display the actual div element that contains the photos AND run the functionality. Something like...
$(window).load(function(){
displayAndRunMyCarousel();
});
the simple javascript version first loads the image in the memory as the src is defined and then you add it to the DOM..
the jquery version first adds it to the DOM and then loads the image.. that's all the diff these have
after comment update:-
var img = new Image();
img.src = imgurl;
$('<img />').attr({ 'src': imgurl }).appendTo(currentli).hide().load(function() {
console.log("preload!");
});
by doing this you can load the image before actually it was being added to the DOM

determine whether body's background-image (css) has been loaded

Depending on some conditions, different background images are loaded:
$('body').css('background','url(image.png)');
Is there a way to determine whether the background image has loaded? I need to execute a function when the image has been loaded.
You could load the image into a hidden <img> tag and assign an onload handler to the tag. In the onload handler you could populate the background image of the body (which should happen more or less instantly because the image is now in the browser cache) and then run your custom code as well.
var hiddenImg = new Image();
hiddenImg.onload = function(){
$('body').css('background','url(' + this.src + ')');
your_custom_onload_code();
};
hiddenImg.src = 'image.png';
var img = new Image ();
img.onload = function () { $('body').css('background','url(image.png)'); };
img.src = src;

jQuery hide image, change contents, show image

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();
});

Categories

Resources