I have an image loaded by JS on a mouse event. It's a fairly big image so I want to make sure it gets pre-loaded. I reemmber some old techniques from years ago and found this example:
<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images)
{
img1 = new Image();
img2 = new Image();
img1.src = "imageName1.gif";
img2.src = "imageName2.gif"
}
</SCRIPT>
I wondered if this is still good/relevant, or maybe browsers automatically detect unused images and preload them anyway? Note my page has to support IE6, so I might still need older techniques anyway, but I'm still interested if more modern browsers have a better way?
Nope, this is it. Why change something that works?
But a more proper usage is like this
(function() {
var img1 = new Image();
var img2 = new Image();
img1.src = "imageName1.gif";
img2.src = "imageName2.gif"
})();
or just
new Image().src = "imageName1.gif";
new Image().src = "imageName2.gif"
Both of these avoids cluttering the global scope with variables.
And language="JavaScript" is deprecated. Use type="text/javascript".
Depends what kind of images you are talking about, icons/buttons etc. could be done using a technique called CSS Sprites.
http://www.alistapart.com/articles/sprites
That's interesting. I was asking myself the exact same question recently. Another method would be to create a DOM element for each element and wait until you need to display it before injecting it into the document body. For example,
var img1 = document.createElement('img');
var img2 = document.createElement('img');
img1.setAttribute('src','imageName1.gif');
img2.setAttribute('src','imageName2.gif');
...and then later, when you know the images are ready to be inserted...
document.getElementById('imagePlaceholder1').appendChild(img1);
document.getElementById('imagePlaceholder2').appendChild(img2);
This does result in the file getting 'pre-loaded' in the modern browsers I tested and it may actually be more consistent with your own coding styles, but I'm still worried that some browsers might not load the image at the time of the element creation but wait until it's added to the document body. So I opted to use the exact solution you mentioned. At least until the next update to ECMAScript, there's nothing wrong with "old code" (at least old code like new Image()). It works and it was intended to work this way. I don't think it's particularly hacky.
[Edit] The second block of code should be made to execute when you are sure the images have loaded and/or when the user does whatever it is you expect him or her to do that triggers its appearance.
Related
I suspect this question may not meet the SO criteria as it's not reproducible. If I could reproduce it I'd probably know what was causing the issue.
I am trying to add an image to the DOM via js. I set the images src in the code and then mount it. The problem that I have is that, when only setting the src and mounting it, the image doesn't load. The element is there, but it has no size, and there was no network request for the image. the onload and onerror never fire either. The img is there and the src is correct, but no image is rendered, the size is 0x0.
It's created and mounted like this:
const image = new Image();
image.src = "my-url-here";
document.querySelector("a").after(image);
I can get this working in two ways. Set the src to blank first and then what I intend it to be:
const image = new Image();
image.src = "";
image.src = "my-url-here";
document.querySelector("a").after(image);
or by preloading the image elsewhere:
// immediately:
const image = new Image();
image.src = "my-url-here";
// ...
// some other place:
const image = new Image();
image.src = "my-url-here";
document.querySelector("a").after(image);
Either works fine and are somewhat viable, though not really preferrable solutions. My question, though, is this; why is this happening? I can't reproduce it anywhere else and so it's maybe specific only to the page I'm looking at (in which case perhaps there's not much help available).
If that's not answerable, then perhaps the question is, where can I look to try and get some information on this because it's incredible difficult to know where to start with this one.
In a javascript script I need to superimpose two png images into one and then save the new image as a single file. My script does not work inside a webpage but completely batch.
The function that I imagined was something like this:
newPng = mergePng(png1, png2);
I have long searched for a javascript library that would allow me to get the result I wanted, but I did not find it. I've also tried among the previous questions here on Stackoverflow, but I have not found any solutions.
Does anyone know if the function I'm looking for exists?
Thank you.
You can draw png files inside a canvas like this:
drawing = new Image();
drawing2 = new Image();
drawing2.src = "draw2.png";
drawing.src = "draw.png";
drawing.onload = function() {
context.drawImage(drawing,0,0);
context.drawImage(drawing2,0,0);
};
Sorry, maybe not correct title..
I have the next question: I want to make preloading with progress bar. And I stuck on one problem.
[CODE 1]:
//Preloader code
var img = [];
img[0] = new Image();
img[0].src = 'test0.jpg';
img[0].onload = function(){
//some code
}
//.....
img[100] = new Image();
img[100].src = 'test100.jpg';
img[100].onload = function(){
//some code
}
//.....
// all images loaded
//.....
/*
for expample in this part of code I need put my image 'test0.jpg' into html
*/
var temp_img = new Image();
temp_img.src = 'test0.jpg';
The question is : will it download 'test0.jpg' again or just take it from cache?
or better to do like this [CODE 2]:
//Preloader code
var img = [];
img['test0'] = new Image();
img['test0'].src = 'test0.jpg';
img['test0'].onload = function(){
//some code
}
//.....
img['test100'] = new Image();
img['test100'].src = 'test100.jpg';
img['test100'].onload = function(){
//some code
}
//.....
// all images loaded
//.....
/*
for expample in this part of code I need put my image 'test0.jpg' into html
*/
var temp_img = img['test0'];
// draw temp_img
I want to use CODE 1. But will it slow down my app? Or better to use CODE 2? Thanks in advance.
Both methods have benefits and drawbacks.
The first method is much lighter on image elements and as a general rule, the fewer DOM elements you generate, the better. There is a chance, though, that the browser will not serve the image from the cache depending on how much information is being loaded. Worst case, you will need to fetch from the network again if the browser has removed the image from the cache.
The second method is much safer and will keep the image held in memory, meaning even if the browser doesn't cache it, it's still available. It's heavier on image elements, though.
Which solution is better depends on your situation. If you're not loading a large amount of images, I'd say solution 1 is the better choice as it leverages the browser's cache. If you really can't afford to reload images off the network, though, solution 2 is safer.
TL;DR
Solution 1 shouldn't slow down your application, but solution 2 will ensure you don't fetch from the network again.
With code 1, your preloader would be useless right? I'd go with 2
Now my entire project is too big for a copy and paste, but here is a basic breakdown of what I'm doing right now:
$(document).ready(function(){
var canvas = $('#Canvas');
var data = {source: "images\pattern.png", repeat: "repeat"} ;
var pattern = canvas.createPattern(data); //Returns 'Null' at random
});
Things I've looked at so far:
Loading time (Somewhat related, it seems to break more often when the page loads faster)
Loading order (Doesn't seem related)
Preloading the image by forcing it to an on-page image beforehand (Doesn't fix it )
Preloading it using Image() and passing the image path to Image().src (doesn't fix it either)
Passing the Image() as data.source instead of a string path (might have helped just a little)
Initting JCanvas beforehand (No function seems to exists for this)
Creating the pattern as early or as late as possible (Seems to change the frequency, but not by a lot)
It seems to have a mind of it's own and I can't figure out what I'm doing wrong. Anyone have a clue as to what I'm doing wrong?
-Edit1-
Debugging through the Jcanvas source right now and I think it has something to do with the context. Is there any way for me to preload the canvas context?
-Edit2-
Forget everything I've said about the context, I think I figured it out.
//JCanvas source
[...]
else {
// Use URL if given to get the image
img = new Image();
img.crossOrigin = params.crossOrigin;
img.src = source; //<-- source is the url of my image ("images\pattern.png")
}
// Create pattern if already loaded
if (img.complete || imgCtx) {
onload(); //<-- When this runs, the image pops up perfectly fine
} else {
img.onload = onload(); //<-- This is what causes the problem,
//onload never seems to actually run
// Fix onload() bug in IE9
img.src = img.src;
}
The img.onload event should happen directly after an image loads, but it never seems to happen.
I have a javascript timer.
It refreshes the img src on a 200ms interval.
I have taken a look at the canvas object. I am unsure whether it is recommended to use the canvas instead of the img element?
I am running tests on both and cannot see any differences in performance.
This is my code for using the timer/img:
This is my code:
var timer4x4
var cache4x4 = new Image();
var alias = 'test';
var lastUpdate = 0;
function setImageSrc4x4(src) {
live4x4.src = src;
timer4x4 = window.setTimeout(swapImages4x4, 200);
}
function swapImages4x4() {
cache4x4.onload = function () {
setImageSrc4x4(cache4x4.src);
};
cache4x4.onerror = function () {
setImageSrc4x4("http://127.0.0.1/images/ERROR.jpg");
};
cache4x4.src = null;
cache4x4.src = 'http://127.0.0.1/Cloud/LiveXP.ashx?id=' + createGuid() + '&Alias=' + alias + '&ReSync=' + reSync;
reSync = 0;
}
*nb will add canvas code in a bit
I am streaming images from my client desktop PC to my web server. I am trying to display as many images (FPS) as possible. The image is a container for 4 smaller images. Stitched up on the client and sent to the server.
I have Googled and it says if doing pixel manipulation and aniumation use canvas.
But, I am just doing animation.
Thanks
The canvas element was designed to draw / edit / interact with images in it. If all you do is display the image, then you don't need that and a simple img is the semantically correct choice (with the added bonus of being compatible on more devices).
In both cases, the performance will be similar (if not the same) because the only thing to happen is that the image is downloaded.
While performance-wise you won't notice much of a difference, since you still cannot fully rely on HTML5 support yet, it is probably best to go with the img-solution for now.