Before I start on this, I really want to avoid using Jquery for reasons I won't go into, so please don't advise me to, as that is not what I am looking for.
I have web page in development which sends multiple ajax requests off and each one returns a lump of html containing an outer div containing inner divs and images. The issue I have is the html returned is showing on the screen before the images within it are finished rendering, giving me a couple of seconds of broken images, which looks amateur.
Is there a way that anyone knows of (without JQuery), that I can programmatically inspect everything within the outer div (possibly using recursion as there are several embedded inner divs etc) and only show the div if all the contents have finished rendering?
var fakeResponse = "<div class=\"outer\"><div class=\"inner\"><img src=\"http://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg\" /></div></div>",
fakeDiv = document.createElement("div"), // here we will store the response, so we can use the .getXXX functions
images,
imagesReady = 0,
i,
length,
callback = function() { // this will help us to determine if all images have been loaded and to show the response if the preloading has finished
imagesReady++;
if (imagesReady == length) {
document.body.appendChild(fakeDiv.firstChild);
}
};
fakeDiv.innerHTML = fakeResponse; // let the browser convert the response into dom nodes
images = fakeDiv.getElementsByTagName("img"); // get all the included images
for (i = 0, length = images.length; i < length; i++) { // then preload each picture
var img = new Image();
img.onerror = callback; // add event handlers to determine the state of processing
img.onload = callback;
img.src = images[i].src; // init the actual loading
}
Related
So I'm using this library https://github.com/jnordberg/gif.js
However, I'm not sure how I'm supposed to convert images that I have into a gif. I've tried doing two things
First approach -
In the function that takes the image (called a number of times)
var newWebCamImage = new webcamImageView({imageUri: imageUri});
$("body").find(".webcam-images").append(newWebCamImage.render().$el);
This function is passed to setInterval, so from that function I call
createGif: function() {
var webcamImages = this.$el.find(".webcam-image");
for(var i = 0; i < webcamImages.length; i ++){
this.gif.addFrame(webcamImage[i]);
}
this.gif.render();
},
This doesn't do anything - the library doc doesn't tell me where the gif will appear, or to what element I should append it to.
The second approach -
In the function in setInterval-
var image = new Image();
image.src = imageUri;
that.gif.addFrame(image);
I then call gif.render() elsewhere, once I have all of the images.
This doesn't do anything because I haven't appended the gif to the DOM anywhere.
How am I supposed to use this library?
I have a web page which contains an iframe, the iframe contains a table which contains up to 1,000 canvas elements. The canvas elements are filled by a function defined in the iframe, which is called by the parent page. The function iterates and fills each canvas with a base64 data URI contained in a hidden span in the parent page. I have read a few other Stackoverflow posts regarding similar issues but I have already tried the most commonly used suggestion (using onload) and that does not seem to work. I am fairly fresh to html/javascript so I doubt I am doing things the best way. I was hoping someone could guide me on how to assure that all the canvas elements are successfully filled with the base64 data on the first load so I don't need to refresh multiple times to get me thumbnails? Here is some code, it is VERY trimmed up code from my html page. If I were to paste the entire page, it might be a bit too much too handle sensibly. Here is what I believe to be the essential actors.
My onload call to my function which fills the canvases, this is on the main page which contains the iframe -
<body onload="document.getElementById('framePage').contentWindow.fillCans();">
Here is the fillCans() function which is contained within the framePage iframe (I probably should move this to the main html page, but so far this is how the script has... evolved haha). pgCnt element contains the "counter" numbers if you will. It will defines how many elements to iterate through. When var c is assigned, the "can"+i elements are the canvases. When var imgSrc is assigned, the "span"+i elements are the hidden span elements on the parent page which contain the base 64 data URIs -
function fillCans() {
var cnt = document.getElementById("pgCnt").innerHTML;
var cnt = cnt.split("-");
var cnt1 = cnt[0];
var cnt2 = cnt[1];
for (var i=cnt1; i <= cnt2; i++) {
var targ = "span"+i
var c = document.getElementById("can"+i);
var ctx = c.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0,128,128);
var image = new Image();
var imgSrc = parent.document.getElementById("span"+i).innerHTML;
imgSrc = imgSrc.split("*");
image.src = imgSrc[0];
ctx.drawImage(image,0,0);
}
Like I said, this will load fine, firebug reports no errors, however all the canvases are white with no thumbnails. When I hit refresh a few times they all finally load. I've read that the image data is asynchronously loaded but I am not certain to as what that means, I assume it means it doesn't play by the rules that onload plays by? Anyways as usual, thanks for all the help stackoverflow community. It will be great to know how to get these thumbnails to load successfully on the first page load.
After #Sebastian's great suggestions I was able to get my JavaScript functioning as it should. I am pasting in the new function. As it works now, in case anyone ever comes across a similar issue. I had to implement an onload call to a function which drew the image, and then utilize in IIFE for loop to insure that each thumbnail was drawn with correctly iterated data.
function fillCans() {
var cnt = document.getElementById("pgCnt").innerHTML;
var cnt = cnt.split("-");
var cnt1 = cnt[0];
var cnt2 = cnt[1];
for (var i=cnt1; i <= cnt2; i++) {
(function(iterable){
var c = document.getElementById("can"+iterable);
var ctx = c.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0,128,128);
var image = new Image();
var imgSrc = parent.document.getElementById("span"+iterable).innerHTML;
imgSrc = imgSrc.split("*");
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = imgSrc[0];
})(i);
}
}
You are right, the problem is that the image has to be loaded first, before you can draw it.
In your case image is not loaded at the time you call
ctx.drawImage(image,0,0);
However later on the browser has cached the image URL and in between the calls to the assignment of the source property and the drawImage call the browser has already retrieved the image from the cache.
To make it work in any case, you need to wait for the image to load:
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = imgSrc[0];
Be sure to first register the callback and then set the src.
See HTML Canvas DrawImage Tutorial
i remove the link for copyright reason !.. sorry !
When you are in Firefox, the images at the left (all the mockup) is loaded, after a few refresh, in chrome and safari, it NEVER show
I think it's a image not loaded in memory problem, but i cant know when image are all loaded, i event put the script at the end, but no luck
So the question, what should do to make sur the images are loaded.. of is there and error in the JavaScript code ?
n.b.
i have tough about encoding the images as base64 for canvas display... is it possible or intelligent to do that ?
Actually, you can determine when all the images have finished loading. In order to do this, you just need to specify a callback function for the onload property of the image object. So, you would end up with something like this (in addition to the code you already have in canvas.js):
var loaded_images = 0;
var image_objects = [];
// This is called once all the images have finished loading.
function drawOnCanvas() {
for (var i = 0; i < image_objects.length; ++i) {
ctx.drawImage(image_objects[i], 0, 0);
}
}
function handleLoadedImage() {
++loaded_images;
// Check to see if all the images have loaded.
if (loaded_images == 7) {
drawOnCanvas();
}
}
document.ready = function() {
for (var i=0;i<myimages.length;i++) {
var tempimage = new Image();
tempimage.src= myimages[i];
tempimage.onload = handleLoadedImage;
image_objects[i] = tempimage;
}
}
The key concept is that you are keeping track of the number of images that have finished loading. Once all of the images are done loading, you know you can draw on the canvas.
I'm by no means any kind of coder or programmer, but I've been trying to load and display some gifs so that they all animate from the beginning at the same time. In other words, I need them to be synchronised.
I've done a lot of Googling and what I've come up with seems to work with Chrome/Safari and Firefox, but as usual, Internet Explorer refuses to cooperate.
My current code is this:
var images = ["thephoto1", "thephoto2", "thephoto3", "thephoto4", "thephoto5"];
function initImages() {
for (var i = 0; i < images.length; i++) {
imageId = images[i];
image = document.getElementById(imageId);
image.style.visibility = "visible";
}
}
function preloadImages(urls) {
var img = new Array();
for (var i = 0; i < urls.length; i++) {
img[img.length] = new Image();
img[img.length - 1].src = urls[i];
}
}
window.onload = function() {
var img = new Array(
"http://desmond.imageshack.us/Himg391/scaled.php?server=391&filename=countdown.gif&res=medium",
"http://icanhascheezburger.files.wordpress.com/2010/11/funny-pictures-gif-cat-love.gif",
"http://i52.photobucket.com/albums/g9/cpchick/Random%20Gifs/therock.gif",
"http://www.mobileapples.com/Assets/Content/Screensavers/dc_1owy86mw.gif",
"http://www.pptbackgrounds.fsnet.co.uk/images/powerpoint-countdown-u1.GIF"
);
preloadImages(img);
initImages();
}
With some added CSS:
.preload
{
visibility: hidden;
}
It's basically this and this script combined.
You can view a live example here: http://jsfiddle.net/AN9uB/
Some possible methods or potentially helpful posts:
Restart an animated GIF from JavaScript without reloading the image.
Javascript to only display animated gif when loaded.
However from reading the comments on those links, I'm not entirely sure they're possible.
The test gifs I'm using are just random images I found and a small forewarning, some of the images are fairly large since I needed to test a variety gifs ranging in size and duration. All of the gifs loop except for the first countdown image which only plays once.
On some occasions the first countdown image doesn't play at all (it's stuck on 10) when viewing the page with Firefox 3.6.18, but otherwise the rest of the gifs all load and display at the same time.
The main problem is that I cannot think of a way to make this work with Internet Explorer. I thought perhaps to preload the images and then refresh the page via javascript. It's an ugly solution, but I think it would work.
Flash is the obvious tool to be doing this kind of thing in, but the friend who I'm making this for only uses gifs.
Is there a more elegant solution that works across all major browsers? Also ideally, to only use Javascript, not JQuery.
Thanks for any help.
Well, you're not really preloading the images, because you're only calling the preloadImages function after the pages has loaded, i.e. after the actual IMG tags in the html have been read, and the browser's probably started downloading them. The last part may depend on the visibility:hidden style, but I'm not sure - at least I don't expect all browsers to agree on what to do in that case.
Also, you have the URLs defined both in the JavaScript, and in the HTML. That's both redundant and also harder to change later.
I must admit I have no idea if this will work right everywhere, but you might try
only having the image URLs in JavaScript - you can then add then
into the HTML, when they're ready
using the onload event handler
on the JS Image objects to assert that an image has been loaded.
Once they've all loaded, add them to the document (i.e. the page).
Now, I don't know when a given browser starts the animation-clock on a gif. If it starts the moment the gif has been loaded, there's not much you can do, since the gif's won't load at the same time. If, however, they first start animating when they're placed in the document (which seems probable, but never trust a browser), then there's a chance.
// This function will add an array of images to div#images
function showImages(images) {
var container = document.getElementById("images"); // get the #images div
for( var i = 0, l = images.length ; i < l ; i++ ) {
var img = document.createElement('IMG'); // create the IMG tag
img.src = images[i].src; // set the src - the image should be preloaded when this happens
container.appendChild(img); // add the IMG tag to the #images div
}
}
// This one will create JS Image objects from an array of URLs
function loadImages(urls) {
var remaining = urls.length; // the images still waiting to be fetched
var images = []; // empty array to hold the created Image objects
// this function will be called for Image object that is loaded
var onloadHandler = function() {
remaining--; // decrement the number of remaining images
if( remaining < 1 ) {
showImages(images); // if all images have loaded, add them to the page
}
};
// create an Image object for each URL
for( var i = 0, l = urls.length ; i < l ; i++ ) {
var img = new Image();
img.onload = onloadHandler; // set the onload-handler before setting the src
img.src = urls[i];
images.push(img); // add the Image object to the images array
}
}
window.onload = function() {
var urls = [
"http://desmond.imageshack.us/Himg391/scaled.php?server=391&filename=countdown.gif&res=medium",
"http://icanhascheezburger.files.wordpress.com/2010/11/funny-pictures-gif-cat-love.gif",
"http://i52.photobucket.com/albums/g9/cpchick/Random%20Gifs/therock.gif",
"http://www.mobileapples.com/Assets/Content/Screensavers/dc_1owy86mw.gif",
"http://www.pptbackgrounds.fsnet.co.uk/images/powerpoint-countdown-u1.GIF"
];
loadImages(urls);
};
Here's a jsfiddle of it all: http://jsfiddle.net/Frqys/2/
Again, I have no idea if this'll actually work in every browser. It seems ok in Safari, Chrome and Firefox (all on Mac OS), but it's impossible to be sure. I'd advise you to copy a gif file a number of times, and give each file a different name, so it'll have a unique URL. That should prevent it from caching, and keep its animation clock separate. Then try loading all those GIFs instead of a bunch of different ones, and see if they stay in sync.
I'm trying to preload a number of images generated on the server to a small website. The preloading is done using setWindowTimeout and uses an Image object, sets the onload callback and then applies the new request uri.
For some requests, the server may have to signal that the image is 'unchanged' and I'm doing it by sending done a small 1x1 pixel gif (seems like I need to send an actual image, returning empty content will cause the Image object to not fire onload). In my onload handler I would like to determine the size of the fetched image and then determine if I should update the visual image with the given image.
Below is a snippet of my current solution (the output is a div to help debug):
refresh: function() {
var newSrc = '/screenshot.ashx?tick=' + new Date().getTime();
var imgObj = new Image();
var self = this;
// this is called when load is done
imgObj.onload = function() {
//if (imgObj.complete)
// return;
if (imgObj.width > 1 && imgObj.height > 1) {
output.innerHTML += '<br/>Updating image:' + newSrc;
img.src = newSrc; //fiddler shows no reload here, read from cache
}
else {
output.innerHTML += '<br/>Empty image:' + newSrc;
}
self.setupNewRefresh();
};
output.innerHTML += '<br/>Loading image:' + newSrc;
imgObj.src = newSrc;
},
I seem to have two problems:
a) the imgObj.complete is false when the function is first called but it is only called once (hence my commenting it out) and
b) I can't seem to rely on the width or height property of the image when loaded. From my tests of fetch the 1x1 pixel, it sometimes reads out 50 which seems to be default when creating a new Image() and it sometimes reads out the correct size of 1.
My ultimate goal is to have a small chunk of javascript logic that queries the server for a new image periodically, does nothing if nothing new has happened (1 pixel image) or loads the new image. I might be going about it the wrong way here or have overlooked important properties or calls, so I'm happy to receive feedbacks.
EDIT: upon suggestion from mplungjan, I preloaded into a hidden div instead, which helped me with problem b). Still no solution to problem a) though; reports complete = false once and is not called again
I'll go ahead and answer my own question.
Preloading the image into a hidden element in the DOM instead of a code-level element was the trick for actually getting correct sizes (thanks mplungjan). The a) issue, namely the complete event, remains unsolved.
As a side note I ended up using the XMLHttpRequest instead as it allowed by to look at the size of the payload returned.