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;
Related
I have a placeholder background image that i want to replace after its loaded.
$.get("BIG-IMAGE-URL").done(function(data){
$('.MY-DIV-CLASS').css('background-image', 'url("BIG-IMAGE-URL")');
});
Does anyone know how to make a simple function like this?
You can load your big image with javascript, and set the CSS background in the load event handler.
var img = new Image(); // Create new img element
img.addEventListener('load', function() {
// set background here
$('.MY-DIV-CLASS').css('background-image', 'url("bigImage.png")');
}, false);
img.src = 'bigImage.png'; // Set source path
Source: MDN Using_images
Additionally, here is a similar solution using jQuery How can I check if a background image is loaded?
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 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();
});
I'm trying to preload image on click event:
// new image object
var imgObject = new Image();
// assign the path to the image to the src property
imgObject.src = document.URL + 'image/image.jpg';
// check if image has loaded
if (imgObject.complete) {
But the complete call never returns true on the first click - any idea what I'm missing here?
.complete is a property of the image object, not an event that you can attach to. Use the onload event:
var image = new Image();
image.onload = function() {
alert('image loaded');
};
image.src = document.URL + 'image/image.jpg';
Note: Be sure to attach to the onload hander before setting the source attribute.
Note Explanation: Image caching. If the image is cached then the onload event will fire immediately (sometimes before setting the handler)
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