0

在我的网站中，我有一个日历，每当用户将鼠标悬停在日历的一天上时，我都希望背景发生变化，但当然我不希望所有加载开销都发生在页面加载时，而是仅在用户悬停时发生超过一天。

我试图按照我在这个问题中的发现来做，但它似乎只在第一次工作。这是我在修改插件代码作为测试后所做的：

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触发（第一个悬停状态，第二个是mouseleave）事件.calendar-day时，我们增加counter并调用loadImage. Usingcounter % backgroundImages.length将返回我们当前的索引，一个介于 0 - backgroundImages.length 之间的数字（不包括 backgroundImages.length 本身的值）。如果您不知道模符号 ( %)，您可以在此处阅读。

loadImage创建一个img未附加到 dom 的元素，添加一个事件侦听器来捕获图像何时加载，然后将img元素设置src为我们当前的图像。一旦图像被加载，我们检查我们是否仍然想将该图像作为背景（或者我们是否已经移动到另一个图像），如果是这样，那么我们设置body背景图像，确信它已经被加载。一旦图像被加载一次，它应该在我们的浏览器中捕获，所以下次我们附加一个事件侦听器以查看图像何时加载时，它应该立即触发。

希望我没有错过任何东西，如果有，请告诉我。

于 2012-11-09T13:03:49.650 回答