Самый быстрый способ предварительной загрузки/загрузки больших изображений

Question

Предварительная загрузка может быть неправильной ...

У меня есть страница, которая загружает очень большое изображение. Я хотел дождаться загрузки большого изображения перед отображением на странице для пользователя.

На данный момент у меня есть загрузки GIF и я использую JavaScript, чтобы ждать изображения для загрузки, а затем заменить загрузки GIF SRC с изображением:

<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> 

Я интересно, если есть это более быстрые способы загрузки этого изображения, например, чистый способ CSS или какой-то способ заставить браузер сначала загрузить этот актив. Вышеприведенный код, очевидно, расположен в том месте, где ожидается загрузка изображения. Таким образом, есть код выше и ниже.

Один вариант CSS Я думал, что нужно позиционировать изображение с экрана, и после его загрузки выполните замену src.

На моем сервере запущен http2, поэтому он должен быть довольно быстрым. Я просто хочу знать, есть ли лучший способ, чем то, что я делаю сейчас, чтобы гарантировать, что большое изображение загружается самым быстрым способом для всех основных браузеров.

Я должен добавить, что уже сделал много оптимизации файла изображения. Я работаю с фотографией высокого разрешения.

Спасибо!

Answer 1

Вы можете сделать JPG прогрессивный, а затем просто позволяет ему загружаться. Браузеры будут постепенно отображать изображение сначала размытым, а затем загружать больше деталей.

Это лучший способ, поскольку пользователь может видеть изображение еще до его полной загрузки.

Edit: Об использовании Linux jpegtran, на Windows, с помощью Photoshop или RIOT

Answer 2

Очень простой способ для предварительной загрузки изображений, которые необходимы позже

$.preloadImages = function() { 
    for (var i = 0; i < arguments.length; i++) { 
    $("<img />").attr("src", arguments[i]); 
    } 
} 

$.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); 

Answer 3

Я думаю, что лучшее решение для вашей проблемы разделить этот файл и загрузить части assync одновременно

Answer 4

Вы делаете большую работу!

Вот что я придумал:

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

Это отделяет JS от HTML + вы можете легко добавьте бесконечные изображения перед загрузкой без изменения js!