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!

回答1:

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

回答2:

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!

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/35482536/fastest-way-to-preload-load-large-images

标签

javascript

jquery

css

image

performance