如何在滚动上只添加一次延迟加载图像？

Question

我在使用jQuery的懒惰负载响应部分时遇到了麻烦。屏幕上显示div.responsive-container后，从<picture>元素加载<template>。它的工作除了我在滚动时在div.responsive-container中多次附加图像。我只需要追加它一次。

这是我的代码：

HTML

<div class="responsive-container">
  <template>
    <picture>...</picture>
  </template>
</div>

的JavaScript

$(window).on('resize scroll', function() {
  if ($('.responsive-container').is(':visible')) {
    $('.responsive-container').each(function(){
      var templateContent = $(this).find('template').html();
      console.log(templateContent);
      $(this).append(templateContent);                       
    });
  } 
});

Answer 1

// Responsive lazy loading images prototype
$(window).on('scroll', function(){
  $('.responsive-container').each(function(){
    var isAdded = false,
        that    = $(this);
    if (that.isInViewport()){
      if(!isAdded){
        var templateContent = that.find('template').html(),
            theImage        = that.find('img');
        that.append(templateContent);
        that.find('template').remove();     
        theImage.on('load', function(){
          if(this.complete){
            that.addClass('loaded');    
          }
        });
      }
      isAdded = true;
    }
  });
});