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

Я хотел бы улучшить скорость загрузки из Shadowbox всплывающих изображений on this page Предварительная загрузка изображений, связанные с со страницы

В основном, все изображения, открытые Shadowbox являются ссылки с этой страницы:

<a href="images/illustration/garden1.jpg" class="garden"></a> 
<a href="images/illustration/garden2.jpg" class="garden"></a>

и т.д. и т.п. .

Я знаю, как для предварительной загрузки изображений, перечислив их, как это:

var images = [ 'image1.jpg', 'image2.jpg', ] 

$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

$(document).ready(function(){ 
$(images).preload(); 
});

Есть ли способ вывести все значения href в массив preload? Если да, то как я могу исключить ссылки на другие документы? Или я все об этом ошибаюсь ?!

Спасибо.

источник

2012-04-16 Caroline Elisa

В приведенном ниже файле будут найдены все изображения, найденные в выбранной папке (введенные в вызов функции listImages). Сохранить как all_images.php в директории, которую вы хотите просканировать для изображений:

<?php 
function listImages($dir){ 
    $ffs = scandir($dir); 
    foreach($ffs as $ff){ 
     if($ff != '.' && $ff != '..' && strstr($ff, '.png') || strstr($ff, '.jpg') || strstr($ff, '.gif') || strstr($ff, '.jpeg')){ 
      echo '"/images/'.$ff; 
      if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff); 
      echo '", '; 
     } 
    } 
} 
echo '[ '; 
listImages('images'); 
echo ']'; 
// output: ["image1.png", "image2.png"] etc. 
?>

Затем предварительно загрузить эти изображения, загрузите файл all_images.php в переменный и поджать сгенерированную строку файлов изображений содержит:

<script src="jquery.js"></script> 
<script type="text/javascript"> 
// put contents of all_images.php file into variable 'images' 
$.get('/all_images.php', function (data) { 
    images = $(data); 
}); 

// The variable 'images' now contains string of file names 
// needed to be preloaded. 
$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

$(document).ready(function(){ 
    $(images).preload(); 
}); 
</script>

Это решение не требует дополнительных файлов 'include' (в отличие от моего предыдущего ответа).

источник

2012-04-16 20:01:42

Спасибо, Райан! Я просто не уверен, что это может сработать для меня, поскольку мне нужно держать классы в ссылках на изображения, чтобы они открывались как отдельные галереи Shadowbox. Хммм ... –

Вы все еще можете? Вы не показываете эту страницу пользователям, вы просто генерируете ее так, чтобы ее можно было загрузить в фоновом режиме в скрытое Div, поэтому, когда пользователь затем нажимает на изображение и открывается полностью в виде галереи Shadowbox, это изображение уже загружено и поэтому кэшировано. Если вы новичок в PHP, я приношу свои извинения за отсутствие объяснения ответа, я изменю его так, чтобы он был совместим с вашим первоначальным методом предварительной загрузки, надеюсь, это будет иметь больше смысла. –

О, еще раз спасибо Райан! Я думал, что ваш метод заменит мой список скрытых ссылок внизу страницы. –

Вот чистый раствор JQuery, используя подстановочные селектор

$(function(){ 
    $('a[href$=".jpg"]').each(function(index, elem){ 
    var href = $(elem).attr('href'); 
    $('<img/>')[0].src = href; 
    }); 
});

В принципе, означает $= Selector «концы-с», так что это находит любую ссылку, которая заканчивается на .jpg и предварительных нагрузок него. Если вы используете соглашение о теневом блоке, вы можете изменить этот селектор на $('a[rel^="shadowbox"]'), чтобы быть более конкретным. ^= означает «начинается с».

источник

2013-01-28 09:48:34 andyvanee

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

ответ

Смежные вопросы