1

検索/トラブルシューティングを行いましたが、役に立ちませんでした。私は単純な画像ビューアーを持っており、JQuery .load() 関数を追加して、画像が読み込まれるまでアニメーションがフェードインするのを待ちます。この側面はうまく機能しますが、奇妙なエラーが発生しました。矢印で写真を見ると、フェードアウト (fadeTo(200,0)) の前に発生する奇妙な遅延が発生し始めます。その行の前にラグを引き起こすものは何もないので、これは私には意味がありません。

(注: .load() 関数が存在しない場合、この遅延は発生しません)

次のボタン (左側の矢印ボタン) の JQuery コードを次に示します。"largeImage" は、表示されるメインの画像です。

http://www.snowtheband.com/temporary/media.htmlに移動し、「画像」の下にあるサムネイルの 1 つをクリックして、画像ビューアーを表示します。

$("#nextButton").click(function(){
    picNumber=parseInt(picNumber);
    if (picNumber<7){
        picNumber+=1;
        picClass="."+picNumber;
        var loadPic="images/photos/"+picNumber+"_large.jpg";
        descText=$(picClass).prop("alt");
        $("#description").fadeTo(200,0,function(){
            $("#description").html(descText).fadeTo(200,1);
        });
        $("#largeImage").fadeTo(200,0,function(){
            $("#largeImage").prop("src",loadPic);
            $("#imagecontainer img").load(function(){
                $("#largeImage").fadeTo(200,1);
            });
        });
    };
});
4

2 に答える 2

0

これは、ソースを設定した後、ブラウザーが画像の取得を開始するためです。loadがトリガーする画像の読み込みが終了したときのみ。

これをスムーズに実行するには、イメージをプリロードする必要があります。

于 2013-04-17T19:51:54.820 に答える
0

スムーズに行うために、次のことを行ってください。

  1. 画像サイズを最小限に抑えます (画像あたり 400 ～ 600 kb はかなり大きいです。画像を 1.5 ～ 2 倍圧縮できます)。
  2. 管理者権限がある場合は、サーバーのパフォーマンスを最適化してください。反応が遅いです。
  3. スライド ショーのすべての画像にプリロード メカニズムを使用します。このトピックのプリロードの詳細を参照してください: jQuery を使用したイメージのプリロード

この方法でプリロードを実装することをお勧めします。

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
$(function() {
    var images = [], i;
    for (i = 0; i < 7; i += 1) {
       images.push("images/photos/" + (i + 1) + "_large.jpg");
    }
    $(images).preload();
});

更新:スクリプトを修正しました。構文エラーがありました。

于 2013-04-17T19:58:28.073 に答える