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

Question

Я изучал предварительную загрузку изображений с помощью JQuery и наткнулся на это Предварительная загрузка изображений с помощью jQuery

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

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

Answer 1

Предварительную загрузку изображения можно выполнить с помощью простой строки 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.

Для полного урока по теме " создание вашего сайта сверхбыстрым " перейдите по следующей ссылке, которую я вручаювыбрано на многих сайтах и ​​в блогах

Предварительная загрузка изображений с помощью jQuery

Answer 2

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

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

Это всего лишь один метод, который использует :before, поэтому имеет ограничения поддержки браузера (

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

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

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