We Keep Coding

Preloading img and inserting src into another img without reloading it

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

Fastest way to preload/load large images

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

Chrome - Image not loaded when loading from JS

I am trying to simply load an image on page load.
When i use a simple src it works ok:
<img src="url.png" />
But when I try to load it from my JS It does not load:
<img id="loadImage" src="" />
JS:
var _img = document.getElementById('loadImage');
_img.src = 'url.png';
The url is shown as 'not found'.
I am getting the same error as in this post : What does status=canceled for a resource mean in Chrome Developer Tools?
I cant seem to solve it, Why is that happening.

Why don't you try and save the whole image tag in a variable? This you you are not providing invalid HTML markup like empty src.
Just change your HTML to
<div id="imageholder"></div>
and use this code
$(document).ready(function() {
var image_1 = $('<img src="img/url.png" />');
$("#imageholder").append(image_1);
});
Take this fiddle and try :)
http://jsfiddle.net/aBF67/
NOTE: I'm using jQuery for that example :)

Try yo create a new Image object and assign it to the src attribute. Example:
var imgObj = new Image();
imgObj.src = "http://.....jpg";
var _img = document.getElementById('loadImage');
_img.src = imgObj;
I hope it helps.

Adding favicons with generic option

I'd like to add favicons to my site using favicon.ico.
however I want to load a generic icon if the site does not provide one.
How can I test for the presense of a favicon and if one is not present manipulate the DOM to point to a generic favicon on the server.

You could use some JavaScript. Adapt to suit...
var img = document.getElementsByTagName('img')[0],
favicon = new Image;
favicon.onerror = function() {
img.src = 'http://some-other-url.com/favicon.ico';
}
favicon.src = 'http://example.com/favicon.ico';

Found this link, wish I would have found this sooner.
<img src="image.gif" onerror="src_to_generic()" />
at
w3 schools
Just call a function on the onerror that resets the src to a generic image.

How to display image from JavaScript

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?