.render()

render()は、スクロールしていない場合にも 画像のロードを待機(ポーリング)させることができます。 例えば、画像を差し替える必要があるにもかかわらず、スクロール中でない場合、 スクロールせずに、内部関数を呼び出す必要があります。 このような時にrender()を使います。

echo.render();

render()もthrottleで管理されます。 これはonresizeイベントにバインド出来ることを意味し、 onscrollイベントと同様に最適化されます。

デモ

1番上の画像だけが表示されている状態で、「1つ目の画像を削除」をクリックします。
render()を"有効"にしている場合、1つ目の画像が削除され、2つ目の画像が表示されます。 3つめ以降の画像も同様です。
render()を"無効"にしている場合、1つ目の画像が削除され、2つ目の画像がローディング中のまま表示されません。 スクロールすると表示されます。 3つめ以降の画像も同様です。

render() :有効無効1つ目の画像を削除

JavaScript

echo.init();
document.getElementById('del').addEventListener('click', function(){
  var img = document.querySelectorAll('.demo > img');
  if (img.length < 2) return;
  document.querySelector('.demo').removeChild(img[0]);
  if (document.getElementById('render').checked) {
    echo.render();
  }
});

HTML

<p>
  <b>render() :</b>
  <input id="render" type="radio" name="render" value="1" checked>
  <label for="render">有効</label>
  <input id="no-render" type="radio" name="render" value="0">
  <label for="no-render">無効</label>
  <button id="del">1つ目の画像を削除</button>
</p>
<div class="demo">
  <img src="./img/blank.gif" data-echo="./img/1.jpg">
  <img src="./img/blank.gif" data-echo="./img/2.jpg">
  <img src="./img/blank.gif" data-echo="./img/3.jpg">
  <img src="./img/blank.gif" data-echo="./img/4.jpg">
</div>