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

Я работаю на домашней странице с jquery с 5 или около того скрытых div, каждая из которых содержит несколько изображений css.

Проблема заключается в том, что браузер не загружает css-изображения в DOM до тех пор, пока не будет показана видимость родительского слоя, в результате чего изображения будут медленно загружаться, когда слой станет видимым.

Решения, которые я уже рассмотрел:

CSS спрайты (слишком много работы для редизайна для этого и обычно не работает при показе/скрытии div)
Этот плагин jQuery, который автоматически загружает фоновые изображения CSS (просто не работает для меня, как сообщается многими другими).
предварительная загрузка изображений через js:
```
$(function() {
function preloadImg(image) {
  var img = new Image();
  img.src = image;
}

preloadImg('/images/home/search_bg_selected.png');
});
```
Это решение, кажется, загружает изображение в dom дважды... один раз, когда js загружает его, а затем снова, когда слой div, который загружает его, становится видимым... поэтому он делает 2 HTTP-вызова, таким образом, не работает.

Любые другие решения для этой проблемы, которые мне не хватает?

Ответ 1

Когда вы говорили другие способы, вы имеете в виду те, которые не используют Javascript?

<script language="JavaScript">
function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
} 
</script>

Другим способом JS является размещение некоторого html на вашей странице, чтобы он не видел:

<image src="picture.jpg" width="1" height="1" border="0">

или HTML...

<img src="images/arrow-down.png" class="hiddenPic" />

... и CSS...

.hiddenPic {
    height:1px;
    width:1px;
}

Дополнительные методы JavaScript:

function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
            imageObj.src=images[i];
        }
    }
}

Затем загрузите изображения, используя что-то вроде:

<script type="text/javascript">
preload('image1.jpg,image2.jpg,image3.jpg');
</script>

Ответ 2

Предварительная загрузка CSS проста.

Пример:

body:after{
    display:none;
    content: url(img01.png) url(img02.png) url(img03.png) url(img04.png)
}

Ответ 3

Жесткие кодирующие URL-адреса, такие как другие решения, предлагают разместить налог на обслуживание кода. Относительно легко избежать этого и сделать общее решение с помощью jQuery.

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

$(':hidden').each(function() {
  //checks for background-image tab
  var backgroundImage = $(this).css("background-image");
  if (backgroundImage != 'none') {
    var imgUrl = backgroundImage.replace(/"/g,"").replace(/url\(|\)$/ig, "");
    $('<img/>')[0].src = imgUrl;
  }
});

Ответ 4

"Это решение, похоже, загружает изображение в дом дважды... один раз, когда js загружает его, а затем снова, когда div слой, который загружает его, становится видимый... поэтому он делает 2 http-звонка, таким образом, не работает"

Второй HTTP-запрос должен ответить в 304 (не изменен), поэтому я думаю, что все в порядке? Другими параметрами являются загрузка изображения через jQuery, а затем вставка в качестве фонового изображения внутри DOM, например:

jQuery.fn.insertPreload = function(src) {
    return this.each(function() {
        var $this = $(this);
        $(new Image()).load(function(e) {
            $this.css('backgroundImage','url('+src+')');
        }).attr('src',src);
    });
};

$('div').insertPreload('[huge image source]');

Ответ 5

Браузеры начинают поддерживать свойства prefetch и preload свойства <link> элемента rel="...".

Addy Osmani сообщение о свойствах preload и prefetch отлично и описывает, когда они должны использоваться:

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

Предварительная выборка служит немного другому варианту использования - будущей навигации по пользователя (например, между представлениями или страницами), где извлечены ресурсы и запросы должны сохраняться в навигациях. Если страница А инициирует запрос предварительной выборки для критических ресурсов, необходимых для страницы B, критические запросы ресурсов и навигации могут быть завершены в параллельны друг другу. Если бы мы использовали предварительную загрузку для этого случая использования, это было бы немедленно отменили на странице как разгрузиться.

Элемент используется так:

<link rel="preload" as="image" href="#" onclick="location.href='https://your.url.com/yourimage.jpg'; return false;" />

Я разрабатываю форму с несколькими шагами, и у каждого есть другое фоновое изображение. Этот шаблон разрешает "мигать" между шагами, когда Chrome загружает следующее фоновое изображение.