javascript - 更改网站背景图片的延迟加载

在我的网站上，我有一个日历，每当用户将鼠标悬停在日历的一天上时，我都希望更改背景，但是我当然不希望所有的加载开销都在页面加载时发生，而只是在用户徘徊时才会发生在某一天。

我尝试按照在this question中找到的内容进行操作，但这似乎仅在第一次使用时有效。这是我修改插件代码作为测试之后所做的：

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() {

    }
  );

即使它确实触发了所有情况，也不会发生延迟加载，并且第一次后背景也不会更改。有什么想法吗？也欢迎使用其他方法来管理此问题。

最佳答案

这可能会帮到您。试试看：

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。使用counter % backgroundImages.length将返回当前索引，该索引介于0-backgroundImages.length之间（不包括backgroundImages.length本身的值）。如果您不知道模数（%），可以阅读here。

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

希望我什么都不会错过，如果是的话，请告诉我。