柳屋

ソースコードのリファクタからよもやままで

Vue.jsでlazyloadを実装

意外に自作するコードが少なかったので、書いてみました。

ソース

<div id="vue-instance">
  <img src="loading.gif">// ローディング画像
  <img src="hoge.jpg" v-on:load="hideLoading">// 表示させたい画像
</div>
var vm = new Vue({
  el: '#vue-instance',
  methods: {
      hideLoading: (event) => {
        event.target.previousElementSibling.remove();
      }
    }
});

画像がロードされたタイミングでメソッドを呼び出してそこで ローディング画像を削除していま

;(function(document){ var pres = document.getElementsByTagName("pre") for(var i=pres.length; i--; ){  var el = makeOl(pres[i]) pres[i].appendChild(el) } function makeOl(pre){ if (pre.className.indexOf("gist") !== -1) { return } var ol = document.createElement("ol") , li = document.createElement("li") , df = document.createDocumentFragment() , br = pre.innerHTML.match(/\n/g) || 0 ol.className = "preLine" ol.setAttribute("role", "presentation") // no lang, no line-number if( pre.className && ! /lang-./.test(pre.className) ){ br.length += 1 } for(var i=br.length; i--; ){ var li2 = li.cloneNode(true) df.appendChild(li2) } ol.appendChild(df) return ol } })(document)