Question

我想提高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值拉入预载数组？如果是这样，我如何排除其他文件的链接？或者我是不是错了？！

感谢。

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

基本上，$=选择器的意思是'ends-with'，所以这会找到以.jpg结尾并预加载的链接。如果您使用的是shadowbox约定，则可能需要将此选择器更改为$('a[rel^="shadowbox"]')以使其更具体一些。 ^=表示'开始'。

预加载从页面链接的图像

2 个答案: