0

このページの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すべての値をプリロード配列にプルする方法はありますか？もしそうなら、他のドキュメントへのリンクを除外するにはどうすればよいですか？それとも私はこれについてすべて間違っているのですか？！

ありがとう。

4

2 に答える 2

0

以下のファイルは、選択したフォルダー（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>

このソリューションでは、追加の「インクルード」ファイルは必要ありません（以前の回答とは異なります）。

于 2012-04-16T20:01:42.290 に答える
0

ワイルドカードセレクターを使用した純粋なJQueryソリューションは次のとおりです

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

基本的に、$=セレクターは「ends-with」を意味するため、.jpgで終わるリンクを検索してプリロードします。シャドウボックスの規則を使用している場合は、このセレクターを$('a[rel^="shadowbox"]')もう少し具体的に変更することをお勧めします。^='starts-with'を意味します。

于 2013-01-28T09:48:34.530 に答える