0

私のウェブサイトにはカレンダーがあります。ユーザーがカレンダーの日の上にカーソルを合わせるたびに背景を変更したいのですが、もちろん、ページの読み込み時にすべての読み込みオーバーヘッドが発生するのではなく、ユーザーがカーソルを合わせたときにのみ発生させたいです1日以上。

この質問で見つけたものに従ってやろうとしましたが、初めてしか機能しないようです。これは、テストとしてプラグイン コードを変更した後に行ったことです。

counter = 0;
  $('.calendar-day').hover(
    function() {
      if (counter == 0) {
        $('body').attr('data-background', template_url + '/images/bg_2.jpg'); 
        counter++;
      } else if (counter == 1) {
        $('body').attr('data-background', template_url + '/images/bg_3.jpg'); 
        counter++;
      } else if (counter == 2) {
        $('body').attr('data-background', template_url + '/images/bg_4.jpg'); 
        counter++;
      } else if (counter == 3) {
        $('body').attr('data-background', template_url + '/images/bg_1.jpg'); 
        counter = 0;
      }  
      $('body').lazyload();
    },
    function() {

    }  
  );

すべてのケースをトリガーしますが、遅延読み込みは発生せず、初回以降は背景が変わりません。これについて何か考えはありますか？これを管理する他のアプローチも歓迎します。

4

1 に答える 1

1

これはあなたのためのトリックをするかもしれません。試してみる：

var counter = -1,
    loadImage = function(onCase) {
        return function(e) {
            if (counter % 4 === onCase) {
                $('body').css('background-image', 'url(' + this.src + ')');
            }
        };
    };

$('body').on('mouseenter', '.calendar-day', function() {
    counter++;
    switch (counter % 4) {
        case 0:
            $('<img>').on('load', loadImage(0))
                .attr('src', template_url + '/images/bg_2.jpg');
            break;
        case 1:
            $('<img>').on('load', loadImage(1))
                .attr('src', template_url + '/images/bg_3.jpg');
            break;
        case 2:
            $('<img>').on('load', loadImage(2))
                .attr('src', template_url + '/images/bg_4.jpg');
            break;
        case 3:
            $('<img>').on('load', loadImage(3))
                .attr('src', template_url + '/images/bg_1.jpg');
            break;
    }
});

onCase競合状態の場合に、「この」背景を追加したいが、まだ別の背景に移動していないことを確認するためのものです。

編集：よりクリーンなバージョン

var counter = -1,
    loadImage = function(index, backgroundImages) {
        $('<img>').on('load', function(e) {
            if (counter % backgroundImages.length === index) {
                $('body').css('background-image', 'url(' + this.src + ')');
            }
        }).attr('src', backgroundImages[index]);
    },
    backgroundImages = [
        template_url + '/images/bg_2.jpg',
        template_url + '/images/bg_3.jpg',
        template_url + '/images/bg_4.jpg',
        template_url + '/images/bg_1.jpg'
    ];

$('body').on('mouseenter', '.calendar-day', function() {
    counter++;
    loadImage(counter % backgroundImages.length, backgroundImages);
});

mouseenter（ホバーの最初の状態、2番目はマウスリーブ）イベントが要素によってトリガーされると.calendar-day、増加して。counterを呼び出しますloadImage。を使用counter % backgroundImages.lengthすると、現在のインデックス、0からbackgroundImages.lengthまでの数値が返されます（backgroundImages.length自体の値は含まれません）。モジュロ記号（）がわからない場合は、ここで%読むことができます。

loadImagedomにアタッチされていない要素を作成しimg、画像が読み込まれたときにキャッチするイベントリスナーを追加してから、img要素srcを現在の画像に設定します。画像が読み込まれたら、その画像を背景として配置するかどうか（または、すでに別の画像に移動したかどうか）を確認します。その場合は、body背景画像を設定し、既に読み込まれていることを確認します。一度読み込まれた画像がブラウザに表示されるとキャッチされるので、次にイベントリスナーをアタッチして画像が読み込まれるタイミングを確認すると、すぐに起動するはずです。

私が何かを逃していないことを願っています、もしそうなら私に知らせてください。

于 2012-11-09T13:03:49.650 に答える