I would like to try and set up a progress bar for several images while their loading and haven't been able to get it to work. I have several images that are preloaded like:
var Image1 = new Image();
var Image2 = new Image();
var Image3 = new Image();
Image1.onload = moveProgressBar();
Image2.onload = moveProgressBar();
Image3.onload = moveProgressBar();
Image1.src = url;
Image2.src = url;
Image3.src = url;
Something weird is happening since they're immediately running the moveProgressBar() function even though the images aren't entirely loaded yet. This happens even when approaching the page with no cache and with cache. Am I missing something? Any help would be appreciated.
The js onload event on images is a big messy mess. Different browsers handle it differently, and different versions (mostly IE) handle it differently. Plus, most browsers have iffy bugs.
Here is a short checklist:
set your onload BEFORE you set your src. (Wait for it, it will get quirkier...)
Handle onerror as well.
Handle images that already was cached. Sometimes they will not fire onload, while other times they will fire and do so imediately.
Use a generic belt-and-suspenders setTimeout()-function that polls to see if the image has gotten a width or height in the DOM. This is done differently in different browsers/versions, which means you'll have to use feature detection, starting with naturalWidth, then move on to getAttribute(width) before image.width.
And then you will still probably have some bugs... but you will only know if you test all browser/versions you intend to support.
For reference, the error was that Noah was calling each function and assigning the result to the onload. It should have been:
Image1.onload = moveProgressBar; // note the lack of ()
Related
I have a problem when I load local (or online) images. So I use canvas HTML 5 then I put a new image on it but image never load at first time. I need to refresh page one time. The first time, images are loaded but not in good time so there are not showed. Then,, when I refresh, images are still in caches of my browser (firefox 50) so that's work.
I saw on forum that I need to wait with :
myimage.onload = function(){
context.drawImage(myimage,0,0,myimage_size,myimage_size);
}
myimage.src = mysrc;
But this doesn't work, images are not showed. So I try another way with that:
var elementHTML = document.createElement('img');
var canvas = document.createElement('canvas');
canvas.width = my_size;
canvas.height = my_size;
elementHTML.appendChild(canvas);
context = canvas.getContext('2d');
base_image = new Image();
base_image.src = base_image_src;
base_image.addEventListener('load', test(this.owner));
function test(owner){
//here there is the trick, with that, all work but I need program work without that !
while(window.alert("done")){};
context.drawImage(base_image,0,0,my_size,my_size)
if (owner == "1") {
//I modified some colors of my image
recolorRGBImage(context,lineTuleColorRGB,playerLineTuleColorRGB_1,lineTrigger);
recolorRGBImage(context,fillTuleColorRGB,playerFillTuleColorRGB_1,fillTrigger);
}
else {
recolorRGBImage(context,lineTuleColorRGB,playerLineTuleColorRGB_2,lineTrigger);
recolorRGBImage(context,fillTuleColorRGB,playerFillTuleColorRGB_2,fillTrigger);
}
}
That's work but obviously, alerts must never show. How can I do what I did without alert? (Alert used like onload because these methods doesn't work)
Thanks !
I did some research about this problem, but my situation is strange. I wrote a function to use ajax to get some image resource and stored it in a variable in js. window.onload() is working fine at the first time, which load all image to variable before displaying, but after that I clicked a link to load more pictures to that variable using ajax again, I do not know how to display those new ones ONLY when they are fully stored in that variable. Please help me with that.
Thanks, Dai.
The loading of individual images can be tracked with img.onload. So, if you're loading a bunch of images and want to know when they are all loaded, you have to put onload handlers on all of them and accumulate a count for when they are all loaded.
var loadCnt = 0;
function cntLoads() {
++loadCnt;
if (loadCnt > 20) {
// all images loaded now, do whatever you want to do here
}
}
var img1 = new Image();
img1.onload = cntLoads;
img1.src "xxxx";
var img2 = new Image();
img2.onload = cntLoads;
img2.src "yyyyy";
....
I have following code on my site:
backgroundImages[bg_img_path_b]=new Image();
backgroundImages[bg_img_path_b].src = bg_img_path_b;
backgroundImages[bg_img_path_b].loaded="loading";
//jQuery(backgroundImages[lastImage]).unbind('load.backgroundImages');
jQuery(backgroundImages[bg_img_path_b]).bind('load.backgroundImages',function(){
if(typeof callback=='function'){
callback.call(this, bg_img_path_b);
if(showLoading) hideLoadingDC();
}
}).bind('load.cache', function(){
backgroundImages[bg_img_path_b].loaded="true";
});;
There is large gallery for images used as background-images of page wrapper. I need to preload images because of speed (the images are quite large). So I have this code (actually is only a part of bigger function, which wraps caching and so on, but this few lines are fired when image is not in cache).
backgroundImages is large array of Image objects, key is the path is the path of image. Every Image object has my property "loaded" which says if image has already been loaded, or is currently in state of loading.
As you can see from my code I am calling callback function when the image is loaded (there are changes of the background etc.)
But I have a problem with I.E<9, the callback is not successfully fired up (but not every time)..When I load my page for first it loads properly, but anytime I call this function again, it goes correctly through without errors, but the load event doesn't fired..
I really don't know where could be an error, in all browsers except older IEs it works fine..
Actually I need to debug if the event is bound correctly, but I can't see it in both IE and Chrome under load item in debugger:(
Please help I am completely screwed, really don't know what to do.
So few days ago I finally found out a solution to my problem..It seems its matter if I at first bind the onload event and then set the url of Image, or at first set the url and then bind the event..
Example
var photo = new Image();
photo.url = "http://www.something.com/something.jpg";
$(photo).bind('load',doSomething());
var photo = new Image();
$(photo).bind('load',doSomething());
photo.url = "http://www.something.com/something.jpg";
First variant runs usually ok, but sometimes it fails (in older IEs)..But the second variant is sure working propely..
which jQuery API version are you using? Try using the latest version of jQuery.
Otherwise use this simple JavaScript code to load images on calling your function on body onload:
var myimages = new Array();
var path = "images/gallery/";
function preloadimages() {
for (i = 0; i < preloadimages.arguments.length; i++) {
myimages[i]=new Image();
myimages[i].src=path+preloadimages.arguments[i];
}
}
// Enter name of images to be preloaded inside parenthesis with douable quotes.
// Extend list as desired with comma.
preloadimages("gImg1.jpg","gImg2.jpg","gImg3.jpg","gImg4.jpg" /*, etc...*/);
Is there any way to show "percentage-load-bar" while loading an image in js?
In other words I want to use this:
var img = new Image();
img.onload = function() {
document.querySelector('#percents').innerHTML = 'all done';
};
img.onreadystatechange = function(e) {
document.querySelector('#percents').innerHTML = e.percentsLoaded;
};
img.src = 'http://example.com/image.png';
Javascript has no intermediate events for loading resources. You can however show a loading bar if you are loading more than one image but I'm guessing that's not the case.
If you do really want this I think the only solution is to use Flash, which can do a number of fancy things but .. well .. it's Flash :/
Look at some of the big album-image hosting sites and see if they have a solution.
Heya, so I'm running into a weird bug/edgecase. Check out the following code:
var i = new Image();
i.src = 'http://ia.media-imdb.com/images/M/MV5BMTIxOTAxNTc4NF5BMl5BanBnXkFtZTcwOTg1NzQyMQ##._V1._SX97_SY140_.jpg';
console.log(i.width);
This works fine in chrome (as it's referring to a real image), but fails in FF. Thought it may have to do with the 'at' signs or the double extension (eg. '._V1._SX97_SY140_.jpg'), but don't really know.
Thanks for any help.
keep in mind, that the image is loaded asynchronously. You need to assign a event handler for the load event of the image and get the width there:
var i = new Image();
i.onload = function() {
console.log(this.width);
}
i.src = 'http://ia.media-imdb.com/images/M/MV5BMTIxOTAxNTc4NF5BMl5BanBnXkFtZTcwOTg1NzQyMQ##._V1._SX97_SY140_.jpg';
A 403 response header means Forbidden (wiki), that you are not allowed to access the resource.
imdb.com might be doing this to prevent hotlinking of their images in other sites.