1

アーティスト向けの Wordpress サイトの一部として、個々のカスタム投稿で使用する単純な jQuery 画像スワップ サイクルを作成しました。基本的には、その下に写真のクレジットが表示された大きな画像と、その下にアート作品のさまざまなビューを示す 7 つのサムネイルのセットです。各サムネイルをクリックすると、サムネイルの href の現在の大きな画像がスワップ アウトされ、写真のクレジットがスワップ アウトされます。写真のクレジットは、PHP によって提供される関連する写真家の名前を含む各サムネイル内の .hideText クラスを含む隠し div を使用します。

Firefox、Chrome、Opera、IE > 8 ではすべて正常に動作します。 href はまだ正しいですが、大きな画像は表示されません。注: jQuery 1.8.2 および Modernizr 2.6.2 を使用します。

IE8 のバグ以外にも、言及する価値があると思われる 3 つの厄介な点があります。1) .load() を使用すると、画像がキャッシュされるまでロード時間が遅くなります。プリローダーを使用するべきだったと思いますが、このセットアップでそれを機能させる方法がわかりません。2) 大きな画像は読み込みに時間がかかるため、画像が読み込まれるまで、絶対位置の写真クレジットが最初に間違った場所に表示されることがあります。理想的には、jQuery の写真のクレジット ブロックを連鎖させて、画像の読み込みコードに従って、それを回避します。匿名関数を使用してそれを実行しようとしましたが、機能させることができなかったため、.delay() はハック的で信頼性の低い代替手段です。3) クリックすると、古い画像が非表示になる前に #artWrap バックグラウンド スピナーを追加し、新しい画像がフェードインした後に削除する必要がありますが、一貫して機能しません。

予想外の時間投資を考えると、振り返ってみると、代わりに WP 画像ギャラリー プラグインを使用していたかもしれませんが、このことについて学びたかったのです。どんな提案でも大歓迎です！

関連する jQuery:

$('.thumbnail').live("click", function() {

$('#artWrap').css('background-image', "url('../img/ajax-loader-48-48.gif')");
$('#artLarge').hide();

var i = $('<img />').attr('src',this.href).load(function() {
    $('#artLarge').attr('src', i.attr('src'));
    $('#artLarge').fadeIn(200);     
    $('#artWrap').css('background-image', 'none');
});

if ( $(this).find('.hideText').is(':empty') ) {
    $('#photoCredit').hide().empty();
} else {
    $('#photoCredit').hide().empty();
    var newCredit = $(this).find('.hideCredit').html();
    $('#photoCredit').html(newCredit).delay(600).fadeIn(200);
}

return false;

});

...

基本的な div 構造:

<div id="artShow">  

    <div id="artWrap" >

        <div id="artImage">
            <img id="artLarge" src="../uploads/EXAMPLE_1-LG.jpg">
        </div><!-- #artImage -->

        <div id="photoCredit">
            Photo: Example 1 Photographer
        </div><!-- .artCredit -->

    </div><!-- #artWrap -->

    <div id="artThumbs" class="clearfix">

        <div id="thumb1" class="thumb">
            <a href="../uploads/EXAMPLE_1-LG.jpg" class="thumbnail nofancybox"><!-- large image link goes in href here -->
                <img src="../uploads/EXAMPLE_1-SM.jpg" width="72" height="72" ><!-- small image -->
            </a>
            <div class="hideCredit">Photo: Example 1 Photographer</div>

        </div><!-- #thumb1 -->

        <div id="thumb2" class="thumb">
            <a href="../uploads/EXAMPLE_2-LG.jpg" class="thumbnail nofancybox">
                <img src="../uploads/EXAMPLE_2-SM.jpg" width="72" height="72" >
            </a>
        <div class="hideCredit">Photo: Example 2 Photographer</div>

        </div><!-- #thumb2 -->

        <div id="thumb3" class="thumb"> ... ETC ... </div>
        <div id="thumb4" class="thumb"> ... ETC ... </div>
        <div id="thumb5" class="thumb"> ... ETC ... </div>
        <div id="thumb6" class="thumb"> ... ETC ... </div>
        <div id="thumb7" class="thumb"> ... ETC ... </div>

    </div><!-- #artThumbs -->

</div><!-- #artShow -->

...

関連する CSS:

/* Content shell for whole image swap show */
#artShow { float: right; position: relative; width: 630px; min-height: 570px; }

/* wrap for both image and photo credit */
#artWrap { float: left; position: relative; background: url('../img/ajax-loader-48-48.gif') center center no-repeat; }

/* wrapper for large image */
#artImage { min-height: 456px; margin-bottom: 19px; line-height: 0;  /* lh adjusts photo credit */ }

/* ID attached to large img */
#artLarge { }  

/* photo credit below artImage */
#photoCredit { 
position: absolute;
right: 0;
bottom: -5px;
height: 16px;
padding-top: 3px;
width: 100%;
text-align: right;
}

#artThumbs { position: absolute; top: 492px; left: 0; width: 651px; height: 72px; }

.thumb { float: left; margin-right: 21px; width: 72px; height: 72px; background-color: #c9c9c9; }

.thumbnail { display: block; width: 72px; height: 72px; }
4

1 に答える 1

0

提供されたステージング URL を使用して少しデバッグした後、問題が何であるかがわかると思います。

画像の関数 ( AM_main.js.load()の 57 行目) は、画像が初めて読み込まれたときにのみ呼び出されているようです。同じ画像が 2 回クリックされた場合、load()関数は呼び出されません。

これは、画像が既に読み込まれており、再度読み込むときにブラウザのキャッシュにあるためです。ここで何が起こっているかというと、loadイベントが発生していますが、画像は既にキャッシュにあるため、属性が設定されるとすぐに発生しています。src

ここで重要なのは、すぐにという言葉です。loadjQueryがコードの次のビットに到達する前に、イベントが発生して終了します...ここで、イベントで呼び出す関数を指定しますload。load()関数は、イベントloadが既に発生した後に定義されます。

srcしたがって、ここでの解決策は、属性を指定する前にロード イベント関数が定義されるように、jQuery コードの順序を変更することです。これはかなり簡単です。次のように、既存のコードをわずかに再配置する必要があります。

var i = $('<img />').load(function() {
    ....
}).attr('src',this.href);

うまくいけば、それで問題が解決するはずです。

<img>別の解決策は、クリック イベントを実行するたびに新しい要素を再作成することを避けることです。<img>毎回再利用される1 つの要素がある場合は、srcが設定された時点で常にロードも行われるため、上記の問題は発生しません。イベントがすぐに発生したとしても、イベント ハンドラー関数が既に存在するため問題ありません。

<img>このソリューションでは、要素を繰り返し作成する必要がないため、パフォーマンスがわずかに向上します。

もちろん、欠点は、上記の他のソリューションよりも大きなコード変更になることです。しかし、大した作業ではないので、試してみるとよいでしょう。

どのソリューションを使用する場合でも、お役に立てば幸いです。

于 2013-03-23T21:28:30.863 に答える