jquery для предварительной загрузки набора фоновых изображений

Мой google-fu подводит меня в этом. У меня есть html-страница с серией div, подобных приведенной ниже, вкрапленной среди других html:

<div class="featureImage" style="background-image:url('defaultBackground');">
<a href="linkHere" style="background:url('realBackground') no-repeat center center;"> </a>
</div>

Я обнаружил, что эти изображения функций (realBrackground) не загружаются предварительно, поэтому они загружаются только тогда, когда отображается вкладка, которая их отображает. Что я действительно хотел бы сделать, так это предварительно загрузить их jquery в фоновом режиме после отображения страницы document.ready(), чтобы, когда пользователь нажимает на другую вкладку, отображение изображения функции было мгновенным, но загрузка не будет замедлить отображение начальной страницы.

Селектор jquery, который я разработал, был $(".featureImage > a").css("background-image"), но как я мог его закодировать, чтобы он проходил и находил все его экземпляры и фактически предварительно загружал изображение после рендеринга страницы?

ОБНОВЛЕНИЕ:

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

Суть заключалась в том, что селектор .css работает только с первым найденным совпадением, и это меня раздражало. Вот что у меня получилось, хотелось бы улучшений!

<script>

function extractUrl(input)
{
 // remove quotes and wrapping url()
 return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
}

function preloadImages(list) {
    var img;
    if (!preloadImages.cache) {
    preloadImages.cache = [];
}
for (var i = 0; i < list.length; i++) {
    img = new Image();
    img.src = list[i];
    preloadImages.cache.push(img);
}
}
jQuery(document).ready(function() {

       var items = new Array();
       $(".featureImage > a").each(function() {
       items.push(extractUrl($(this).css("background-image")));});
       preloadImages(items);

});
</script>

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


jquery background-image preload
person UltraBob    schedule 19.06.2012    source источник
comment
Возможный дубликат предварительной загрузки изображений jquery и Javascript предварительного загрузчика изображений и Есть ли способ асинхронно загружать изображения в кэш пользователя?.   -  person jfriend00    schedule 19.06.2012

Ответы (2)


arrow_upward
4
arrow_downward

Ссылка http://thinkpixellab.com/pxloader/

Эта библиотека фактически предварительно загружает изображения.

//core file
<script type="text/javascript" src="js/PxLoader.js"></script>

// Create the loader and queue our 3 images. Images will not 
// begin downloading until we tell the loader to start. 

var loader = new PxLoader(), 
backgroundImg = loader.addImage('images/headerbg.jpg'), 
treesImg = loader.addImage('images/trees.png'), 
ufoImg = loader.addImage('images/ufo.png'); 


// callback that will be run once images are ready 
loader.addCompletionListener(function() { 
var canvas = document.getElementById('sample1-canvas'), 
    ctx = canvas.getContext('2d'); 

ctx.drawImage(backgroundImg, 0, 0); 
ctx.drawImage(treesImg, 0, 104); 
ctx.drawImage(ufoImg, 360, 50); 
}); 



// begin downloading images 
 loader.start();
person Ankur Verma    schedule 19.06.2012
comment
Спасибо за Ваш ответ! Предварительная нагрузка, вероятно, было неправильным словом. На самом деле Postload - это то, что я хочу, и в настоящее время у меня возникают проблемы с тем, как пройти через загруженный dom и получить список URL-адресов для загрузки. Итак, предполагая, что я использую pxloader, часть, на которой я сейчас застрял, заключается в том, как динамически сделать это для каждого фонового изображения, которое соответствует селектору, который я дал в вопросе: backgroundImg = loader.addImage('images/headerbg.jpg'), treesImg = loader.addImage('images/trees.png'), ufoImg = loader.addImage('images/ufo.png'); - person UltraBob; 19.06.2012

arrow_upward
2
arrow_downward

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

Суть заключалась в том, что селектор .css работает только с первым найденным совпадением, и это меня раздражало. Вот что у меня получилось, хотелось бы улучшений!

<script>

function extractUrl(input)
{
 // remove quotes and wrapping url()
 return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
}

function preloadImages(list) {
    var img;
    if (!preloadImages.cache) {
    preloadImages.cache = [];
}
for (var i = 0; i < list.length; i++) {
    img = new Image();
    img.src = list[i];
    preloadImages.cache.push(img);
}
}
jQuery(document).ready(function() {

       var items = new Array();
       $(".featureImage > a").each(function() {
       items.push(extractUrl($(this).css("background-image")));});
       preloadImages(items);

});
</script>

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

person UltraBob    schedule 08.02.2013
comment
но это решение не уведомляет браузер/JS о завершении загрузки изображений или нет. - person Raptor; 09.02.2014
comment
Для меня это не имело решающего значения, я не предпринимаю никаких действий по завершении загрузки, я просто хочу, чтобы они ждали, когда пользователь щелкнет и откроет их. Если у вас есть решение, которое уведомляет браузер, я хотел бы увидеть его и узнать, как это делается. - person UltraBob; 10.02.2014