We Keep Coding

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

HTML - Display animation while JavaScript loads

I'm using this JavaScript to preload few images on my website.
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"img/1.png",
"img/hover.png",
"img/image.png",
"img/work1.png"
)
This code is linked in HEAD of the site.
But when someone is visiting my website he waits for few second's while images are loaded and in that time he sees blank (white) website until JS files are loaded. I want to make that when someone visit my website he see a "Loading progess bar" or message that say "Wati until page is loaded" etc. Without a blank index page where JavaScript is linked

Unless an accurate progress bar is actually helpful to your users you are probably better off simply use an animated gif that gets hidden after your loading functions finish. Something like this:
Put the gif on the top of your index.html file. Something like
<div id="loading-gif"><img src="/path/to/gif"></div>
Then when your content loads, simply execute something like
document.getElementById("loading-gif").style.display = 'none';
Note, license information for the above image is located here.

Google pagespeed- load images without affecting render time

I have a slider and am loading low grade images to facilitate a quick load.
on window ready i am loading the proper sized images
function loadImages(){
var images= document.getElementById('dhadimages').getElementsByClassName("dhadsecondimg");
var index;
for (index = 0; index < images.length; ++index) {
images[index].src= images[index].dataset.img;
}
}
window.onload = function () { loadImages(); }
but pagespeed counts this as part of the render time. For the moment i am loading when the user clicks on something and obviously this works, but why is pagespeed not detecting window.onload and stopping measurements there? Is there any techniques beside delay or any later events to bind to?

Add the async tag to your script (you may have to make this a separate script to enable you to do this). The browser executes all of your JS before "saying" it's finished with the DOM. Adding async as a tag to this script lets the browser continue building the DOM without waiting for the image loads.

Javascript image preloading, I'm doing something wrong

I'm using document.images to load images when a visitor first visits the website. The reason is because I have a few different areas which have rollover images. Before I switch over to using CSS sprites (modifying a lot of work), I'm going to ask here.
So I'm preloading images with this:
images = new Array();
if (document.images) {
images.push(preloadImage("http://website.com/images/myimg.png", 300, 200));
}
function preloadImage(src, x, y) {
var img = new Image(x, y);
img.src = src;
return img;
}
And according to Chrome's "resource" panel, this is working just fine. Even after pressing CTRL+F5, the images listed in the JS are downloaded.
HOWEVER, they are not used. If I hover over an element in one of my three scripts, the image is downloaded a second time. Derp?
I assume that when preloading images this way, you're supposed to put that image array to use. I thought the browser would be smart enough to say "Hey, this is the same image, let's use it twice" but apparently not.
So is this correct? Do I need to rewrite my programs to preload images individually? I know it doesn't sound hard, but it's really not designed for that.

This is not really an answer to your question, but I proprose a different solution. Put all the images you need to preload inside a div that is hidden from the user. I know, I know, this i not as elegant, but it should work just fine. :)
<div style="display: none;">
<img src="http://website.com/images/myimg.png" alt=""/>
...
</div>

This works fine for me:
function imgPreload() {
var imageList = [
"my/firstimage.png",
"my/secondimage.jpg",
"my/thirdimage.png"
];
for (var i = 0; i < imageList.length; i++ ) {
var imageObject = new Image();
imageObject.src = imageList[i];
}
}
imgPreload();
Cheers. Frank

Javascript document.write() - Replace PNG with GIF?

The Scenario
I have an asp.net web application with a HTML/CSS front end.
This all works fine but in Internet Explorer 6, the transparent PNG's that I use within the site are not transparent due to the poor design of this particular browser.
Solutions Attempted
I've already attempted various IE6 PNG Transparency fixes that didn't work.
The Proposed Solution
I thought about using GIF Image replacements for when the website detects that the browser is IE6. I don't have any javascript experience but someone has mentioned that I could use the "document.write()" feature off javascript to replace the PNG's with GIF's of the same image when using IE6 as the browser.
The Question
Please could someone explain to me how I would go about doing this?
Baring in mind I have an understanding of C# etc. but no javascript knowledge. I'm only just starting out as a web developer so simple explanations would aid me greatly.
Thanks for the help.
Regards.

If we assume that
a) the gif files will have the same name and,
b) they already exist (you're not looking for some gif creator).
Then you just need to replace the src attribute for these files. This would be done onload, and doesn't require document.write(). Go with:
<!--[if lte IE 6]>
<script type="text/javascript">
window.onload = function() {
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var image_png_src = images[i].src;
var image_gif_src = image_png_src.replace(".png", ".gif");
images[i].src = image_gif_src;
}
};
</script>
-->
The nice thing about the above method is that it doesn't have to check if it's gif or png or jpg every time, because it simply won't replace it with .gif unless there is a .png. The bad thing is that if, for some reason, you have an image with .png in it (and I can't imagine why) but it isn't the file extension, it would replace that bit with .gif.
Hope that helps.

Have you tried jQuery's pngFix? It makes the PNG transparent for IE 6 and you don't need to maintain two sets of images (PNG and GIF).
Using it doesn't require much javascript knowledge, so it wouldn't hurt to take a look at it.

Let's say your img element has an id="my_img"
To detect if browser is IE6, use conditional comments. Further, add Javascript like this:
<!--[if IE 6]>
<script>
document.getElementById("my_img").src = "images/alternate.gif"
</script>
<![endif]-->
You might also like to have a look at this:
IE6 PNG transparency

Here is the code runs a replace on IE6 only:
window.onload = function() {
if(navigator.userAgent.match(/MSIE 6/) != null)) {
var images = document.getElementByTagName("img");
for (var i = 0; i < images.length; i++) {
var src = images[i];
if(src.match(/\.png$/)){ //endswith .png
images[i].src = src.replace(/\.png$/g,'.gif');
}
}
}
};

jQuery version of the replacement:
$(document).ready(function()
{
// List all PNG images
$("img[src$=.png]").each(function(i, img)
{
// Replace with GIF versions
img.src = img.src.replace(/\.png$/, '.gif')
});
});

W3Schools is a great place to start if you're wanting to learn javascript.
For example, take a look at the getElementsByTagName function...
There is also a browser detect function here
Good luck - hope that helps.