I'm trying to preload an image via javascript and insert it into another image at the right moment without a new fetch.
Unfortuantely, when I replace the src of an img with the preloaded src, the image gets reloaded and chrome doesn't use the cashed one. What can I do?
This is how I preload the image:
if (document.images) {
this.img = new Image();
this.img.src = "img/img.jpg";
}
and later I'm inserting it like this:
this.poster.src = this.img.src;
Thanks!
Actually this code works fine. I was using a preprocessor that would prohibit caching. On the server everything works fine
Related
Preload may not be the correct term...
I have a page which loads a very large image. I wanted to wait for the large image to completly load before displaying on the page for the user.
At the moment, I have a loading gif and i'm using javascript to wait for the image to load and then replace the loading gif src with the image:
<img src="loading.gif" id="image" />
<script>
img = 'very_large_image.jpg';
var newimg = new Image();
newimg.src = img;
newimg.onload = function(){
$('#image').attr('src',img);
}
</script>
I'm wondering if there are quicker ways to load this image such as a pure CSS way or some way to force the browser to download this asset first. The code above is obviously positioned in the location where the image is expected to load. So there is code above and below.
One CSS option I thought was to position the image off the screen and once it's loaded, perform the src replace.
My server is running http2, so it should be pretty quick. I just want to know if there is a better way then what i'm doing now to ensure the large image is loaded the quickest way possible for all major browsers.
I should add, i've already done plenty of optimisation of the image file already. I'm working with high resolution photography.
Thanks!
You can make the JPG progressive and then just let it load. Browsers will progressively display the image first blurry and then load more details.
This is the best way because user can see the image even before it's fully loaded.
Edit:
On linux use jpegtran, on Windows use Photoshop or RIOT
Your doing a great job!
Here is what I came up with:
https://jsfiddle.net/Vandeplas/jkwweh52/
HTML:
<img src="http://loadinggif.com/images/image-selection/32.gif" large-src="http://www.planwallpaper.com/static/images/518079-background-hd.jpg" large-class="fancyImg">
JS:
$('img[large-src]').each(function() {
var img = $(this);
var newimg = new Image();
newimg.src = img.attr('large-src');
newimg.setAttribute('class', img.attr('large-class'));
newimg.onload = function() {
img.replaceWith(newimg);
};
});
That separates the JS from the HTML + you can easily add infinite more pre-loading images without having to change the js!
Very easy way to preload images which are needed later
$.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
$("<img />").attr("src", arguments[i]);
}
}
$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
I think that the best solution for your problem is split this image and load the parts assync at the same time
I have a function where I get the img src value as the parameter, what I want to do is check to see if that image loads with a 200 ok or 404/some other error. If it gets a 200 ok, then I want to inject an img tag with that src into the DOM(I reason that during checking,it also gets loaded into the browser cache and injecting that img tag into the DOM loads it from the cache ). I tried with a simple snippet of code as follows :
function checkImage(src)
{
var img = new Image(),
tag = '<img src="'+src+'" />',
alt = '<span>sorry,image broken</span>';
img.onload = function(){
$('.some-container').html(tag);
};
img.onerror = function(){
$('.some-container').html(alt);
};
img.src = src;
}
It worked fine in chrome, but went havok in firefox and ie(both of them are firing only the error event no matter whether the image loaded fine or broke). Instead of using onload and onerror, I tried it using jquery like :
$(img).load(...).error(...).attr('src',url);
$(img).on('load',...).on('error',...).attr('src',url);
$('<img />').load(...).error(...).attr('src',url);
$('<img />').on('load',...).on('error',...).attr('src',url);
and even tried the jquery.imagesLoaded plugin by desandro(https://github.com/desandro/imagesloaded) like :
$(img).imagesLoaded().done(...).fail(...);
$(img).imagesLoaded().progress(function(instance,image){
image.isLoaded?alert('loaded'):alert('broken');
});
$('<img />').imagesLoaded().done(...).fail(...).attr('src',url);
$('<img />').imagesLoaded().progress(function(instance,image){
image.isLoaded?alert('loaded'):alert('broken');
});
I also tried the solutions from :
jQuery callback on image load (even when the image is cached)
https://groups.google.com/forum/#!topic/jquery-dev/7uarey2lDh8
but as it turns out, works in chrome, but not in FF or IE, is there any solution where I can check for an image which is present in memory but not in the "DOM" ? Thanks in advance.
You have to check for image onload after setting a source to it.
var img = new Image();
//set source to the image
img.src = "set/image/source/path"
img.onload = function(){
//if image load is successful
//create an jQuery object out of this image
var jQimage = $(this);
$('.myContainer').html(jQimage);
}
Also note that jQuery load function cannot guarantee you a cross browser check for image loading as mentioned in jQuery docs
So, the best approach is to check onload with native javascript and create an jQuery object if necessary to make use of jQuery methods.
Have a look at what w3schools has to say about the Image() javascript object.
http://www.w3schools.com/jsref/dom_obj_image.asp
onabort - Loading of an image is interrupted, W3C YES
onerror - An error occurs when loading an image, W3C YES
onload - An image is finished loading, W3C YES
also the complete property of the Image() object, determines if the browser is finished loading an image, Unfortunately this particular property is not W3c
hope that helps a little
PS: After having a little Google search I found this Q/A from Stack overflow.
Cross-browser image onload event handling
I'm modifying some images on canvas and then setting src of this images to new base64 coded pictures.
img.src = changeColor(img);
changeColor returns base64 coded image:
return canvas.toDataURL();
Chrome and Opera are refreshing images after src change, but firefox don't!
I also inspected the image element by FireBug, and it shows new src and new image!
I have already tried to add Data to URL but uhh... this is a base64 coded image, not an url, so it breaks my pictures totally.
I there any way to force reload images or disable firefox cache via javascript?
UPDATE:
I have also tried to set image.src=''; in changeColor function.
It works in chrome, but in firefox... picture disappear, and do not appear again when i set new base64 value.
It's working for me as #dmmd mentioned. You only need to add query string with a random value.
id.src = "path?t=t"+ Math.random(5);
I am not using image data, but this worked for a similar issue where FF was not reloading when the src variable didn't change:
image.src = "";
setTimeout(function(){
image.src = //the new image src
}, 0);
Try adding the image format (and use jpg). It may re-encode the image:
return canvas.toDataURL('image/jpg');
How to display an image using JavaScript from an array creating in JavaScript.
Any help please?
Thanks.
If you've got an image tag in your HTML layout, with a given id, you can control its content with javascript:
function updateFullImage(id, url) {
var img = document.getElementById(id);
img.src = url ;
}
and the browser (FF at leat) will automatically reload your image
You can create an image in JavaScript: var img = new Image(); img.src = "path-to-image"; and then add it to the DOM (depending on if you're using a js library like jQuery or not this will vary in complexity). Can you be more specific as to your circumstances?
I was wondering, is there a way to detect if a certain image / div is loaded?
For example when i am loading two heavy images and showing a loading sign at the two places the images will later occupy, is there a way to already display the first image when it's loaded while still loading the second one?
myImage.addEventListener('load', function() { ... }, false);
Code inside the above function will be called when the image is finished loading.
If you are using new Image to preload images, then you can do the following to be notified of then it is loaded
var img = new Image();
img.onload = function() {
//display the image
document.getElementById("myDiv").innerHTML = "%3Cimg src='myimg.jpg' alt=''/%3E";
};
img.src = "myimg.jpg";
Remember to set the src after the onload.
if an image is done loading, its .complete property switches to true.