Question

在我的网站上，我有一个日历，每当用户在日历的一天中盘旋我想要更改背景时，当然我不希望所有加载开销都发生在页面加载时，而是仅当用户在其中一天中盘旋。

我尝试按照我在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() {

    }  
  );

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

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

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

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

更改网站的背景图像与延迟加载

1 个答案: