CODEWITHSUNDEEP
javascriptjquerycssimageperformance
David
David

Reputation: 16746

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!

Upvotes: 4

Views: 8064

Answers (4)

VDP
VDP

Reputation: 6420

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!

Upvotes: 1

Radek Pech
Radek Pech

Reputation: 3098

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

Upvotes: 5

Marvin Medeiros
Marvin Medeiros

Reputation: 252

I think that the best solution for your problem is split this image and load the parts assync at the same time

Upvotes: 0

Sourav Basak
Sourav Basak

Reputation: 486

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");

Upvotes: 0

Related Questions