It's easy to keep javascript waiting for some images to load if those are classic HTML images.
But I can't figure how to do the same if the image is loaded as a CSS backuground-image!
Is it possible?
The jQuery .load() method doesn't seem to apply.. and I'm short of ideas
It's easy to keep javascript waiting for some images to load if those are classic HTML images.
But I can't figure how to do the same if the image is loaded as a CSS backuground-image!
Is it possible?
The jQuery .load() method doesn't seem to apply.. and I'm short of ideas
- The first thing that es to mind is to precache the image in an actual img element which you can hide. Something like: technosophos./content/…. There are probably better solutions though. – mowwwalker Commented Jan 28, 2012 at 3:47
- 2 You may want to check out this answer: stackoverflow./questions/3489270/… – Jason Gennaro Commented Jan 28, 2012 at 3:48
- I haven't tried this, but perhaps you could do an image pre-load from JS/jQuery (like for old-school image rollovers), check the loaded status of the image, and then after it has loaded assign the CSS background property to the same image before going on with whatever other JS you want to do when the image is ready? – nnnnnn Commented Jan 28, 2012 at 3:48
- so the background loading doesn't trigger any event.. too bad. Then I guess I'll manage to get it working with a preloader. thanks for the hint guys – Valentino Commented Jan 28, 2012 at 3:55
- you can use AJAX to do this, after success your request finish your waiting. – Ali Youhanaei Commented Jan 28, 2012 at 6:28
4 Answers
Reset to default 1It looks for elements with src attribute or backgroundImage css property and calls an action function when theirs images loaded.
/**
* Load and wait for loading images.
*/
function loadImages(images, action){
var loaded_images = 0;
var bad_tags = 0;
$(images).each(function() {
//alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display"));
var image = new Image();
var src = $(this).attr("src");
var backgroundImage = $(this).css("backgroundImage");
// Search for css background style
if(src == undefined && backgroundImage != "none"){
var pattern = /url\("{0,1}([^"]*)"{0,1}\)/;
src = pattern.exec(backgroundImage)[1];
}else{
bad_tags++;
}
// Load images
$(image).load(function() {
loaded_images++;
if(loaded_images == ($(images).length - bad_tags))
action();
})
.attr("src", src);
});
}
One alternate approach would be to fetch the image data via AJAX as a base64 encoded png and apply it to the element's background-image property.
For example:
$.get('/getmyimage', function(data) {
// data contains base64 encoded image
// for ex: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
$('#yourElement').css('background-image', 'url("' + data + '")');
});
You will also need a server side script that reads the image, converts it into base64 encoded png (and cache it maybe) and return the same.
this is untested code but try this:
$(document).ready(
function()
{
var imgSrc = $('theTargerElement').css('background-image');
var imgTag = $('<img>').attr('src',imgSrc).appendTo( 'body' );
}
);
$(document)
.load(
function()
{
// do stuff
}
);
Try this one...
Its a jQuery-Plugin which gives you control to wait for images to be loaded
Project-Home
Thread @ SO Official way to ask jQuery wait for all images to load before executing something
Answer @ SO (ShortLink)