Предварительный просмотр изображений?

Question

Я смотрел в Предзагрузка изображения с JQuery и наткнулся на этот Preloading images with jQuery

Теперь кто-то может сказать мне, я должен назвать предустановленные изображения в любом случае? Я предполагаю, что это создает img, а затем браузер кэширует (по крайней мере, для этой страницы), и я просто использую предварительно загруженное изображение с помощью URI?

Может кто-нибудь уточнить здесь?

Answer 1

При условии, что сервер устанавливает правильные заголовки кеша, изображение должно быть кэшировано, и вы должны просто использовать URL-адрес и мгновенно получить изображение.

Answer 2

Предзагрузка изображение может быть сделано с помощью простой линии JavaScript:

new Image().src='image.png'; 

Для поджимать файлы JavaScript, используйте JavaScript include_DOM технику и создать новый

<script> тег, например, так:

var js = document.createElement('script'); js.src = 'mysftuff.js'; 
document.getElementsByTagName('head')[0].appendChild(js); 

Вот версия CSS:

var css = document.createElement('link'); 
css.href = 'mystyle.css'; 
css.rel = 'stylesheet'; 
document.getElementsByTagName('head')[0].appendChild(css); 

В первом примере изображение запрашивается, но никогда не используется, поэтому оно не влияет на текущую страницу. Во втором примере скрипт добавляется на страницу, поэтому, как и загрузка, он будет разбираться и выполняться. То же самое касается CSS - он тоже будет применен к странице. Если это нежелательно, вы все равно можете предварительно загрузить активы с помощью XMLHttpRequest.

Для полного учебника по «сделать свой сайт сверхбыстрого», пожалуйста, перейдите по следующей ссылке, которую я поднял руку от многих сайтов и блогов

Preloading images with jQuery

Answer 3

Вы можете предварительно загрузить все ваши изображения с помощью этого ниже:

function loadImages(){ 
    var images = [ 
     'http://cdn.yourdomain.com/img/image1.png', 
     'http://cdn.yourdomain.com/img/image2.jpg', 
     'http://cdn.yourdomain.com/img/image3.jpg', 
     'http://cdn.yourdomain.com/img/image4.jpg' 
    ]; 
    $(images).each(function() { 
     var image = $('<img />').attr('src', this); 
    }); 
} 

Answer 4

Я загружаю много, используя только CSS. Мне не нравятся версии jQuery, потому что вам нужно дождаться загрузки библиотеки в первую очередь, и если они не включены JS или jQuery задерживается, у них будут заметные задержки смены изображений при опрокидывании.

Если вам требуется обратный вызов, когда изображения завершили предварительную загрузку, используйте JS/jQuery. В противном случае используйте CSS.

Это всего лишь один метод, который использует :before, поэтому имеет ограничения на поддержку браузера (< IE8). Хорошая вещь об этом - вам не нужна дополнительная HTML-разметка.

HTML

<div class="logo"></div> 

CSS

.logo { 
    background:url(logo-1.png); 
} 

.logo:before { 
    content: url(logo-2.png); 
    width: 0; 
    height: 0; 
    visibility: hidden; 
} 

Другой метод должен был бы просто установить фоновые изображения скрытых элементов на странице с изображениями, которые необходимо предварительно загрузить.

HTML

<div id="preload-logo-2"></div> 

CSS

#preload-logo-2 { 
    background: url(logo-2.png); 
    height: 0; 
    width: 0; 
    visibility: hidden; 
}