preload hidden CSS images

Question

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

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

Solutions Я уже рассмотрел:

• CSS спрайтов (слишком много работы, чтобы перепроектировать для этого, а также не реально работать, когда отображение/скрытие дивы)
• This jQuery plugin, которые автоматически загружает CSS фоновых изображений (просто не работает для меня, как сообщают многие другие).

• поджимать изображения с помощью JS:

  $(function() { 
  function preloadImg(image) { 
      var img = new Image(); 
      img.src = image; 
  } 
  
  preloadImg('/images/home/search_bg_selected.png'); 
  }); 
  

  Это решение кажется, чтобы загрузить изображение в йот дважды ... один раз, когда JS загружает его, а затем еще раз, когда ДИВ слой, который загружает становится видимым ... поэтому он делает 2 HTTP-звонка, поэтому не работает.

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

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

Answer 2

«Это решение кажется, чтобы загрузить изображение в йот дважды ... один раз, когда JS загружает его, а затем снова, когда слой , который загружает его, становится видимым ... поэтому он делает 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]'); 

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

Answer 4

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

Пример:

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

Answer 5

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

Addy Osmani-х post about the preload and prefetch properties отлично и описывает, когда они должны быть использованы:

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

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

Элемент используется следующим образом:

<link rel="preload" as="image" href="https://your.url.com/yourimage.jpg" /> 

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