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

Question

Я хотел бы улучшить скорость загрузки всплывающих изображений Shadowbox на этой странице

В основном все изображения, открытые 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 значения в массиве предварительной загрузки? Если да, как я могу исключить ссылки на другие документы? Или я об этом все не так понял?!

Благодарю.

Answer 1

В приведенном ниже файле будут найдены все изображения, найденные в выбранной папке (введенные в вызов функции 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>

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

Answer 2

Вот чистое решение JQuery с использованием подстановочного знака

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

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