New Twiddle

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  data: Ember.computed(function() {
    let arr = [];
    let i = 0;
    
    while (i < 100) {
      arr.push(i);
      i++;
    }
    
    return arr;
  }),
  
  showImages: true,
  
  actions: {
    toggleImages() {
      this.toggleProperty('showImages');
    }
  }
})

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

<div>
<button {{action 'toggleImages'}}>Toggle</button>
</div>

{{#if showImages}}
{{#each data as |item|}}
  {{lazy-image "http://i.imgur.com/YhT6wD7b.jpg" }}
{{/each}}
{{/if}}
<br>
<br> 

helpers.lazy-image.js

import Ember from 'ember';


export default Ember.Helper.extend({
  
  init() {
    this._super(...arguments);
    this._animationFrame = null;
    this.img = new Image();
    this.img.style.visibility = 'hidden'
    this.srcUrl = null;
  },
  
  startScrollCheck() {
    const component = this;
    
    function step() {
      var continueStep = component.scrollCheck();
      
      if (continueStep) {
        nextStep();
      }
    } 
    
    function nextStep() {
      component._animationFrame = requestAnimationFrame(step);
    }
    
    nextStep();
  },
  
  cancelScrollCheck() {
    if (this._animationFrame) {
      cancelAnimationFrame(this._animationFrame);
      this._animationFrame = undefined;
    }
  },
  
  willDestroy() {
    this.cancelScrollCheck();
  },
  
  scrollCheck() {
  	let { top, left, width, height } = this.img.getBoundingClientRect();
   	let clientHeight = document.documentElement.clientHeight;
  	let clientWidth = document.documentElement.clientWidth;
   	let clientX = 0; 
   	let clientY = 0;
    
    if (left < clientX + clientWidth &&
   		left + width > clientX &&
   		top < clientY + clientHeight &&
   		height + top > clientY) {
      this.img.src = this.srcUrl;
      this.img.style.visibility = 'visible';
      return false;
    }
    
    return true;
  },
  
  compute([srcUrl], { height = 100, width = 100 }) {
    this.srcUrl = srcUrl;
    this.img.height = height;
    this.img.width = width;
    this.startScrollCheck();
    return this.img;
  }
});

twiddle.json

{
  "version": "0.4.13",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}