yoneapp@iPhoneアプリ開発

スタートアップの支援を行うiOS&Railsエンジニアのブログ

vue.jsでimgの:srcを変更した際にローディングを表示したい

GitHub - hilongjw/vue-lazyload は初回ロードは出せてるように思う

javascript - Vuejs get image from remote source - Stack Overflow
のようにBackgroundだとうまくいくか?ただ、本当にやりたいことではない。

先行きが見えなかったので質問させて頂いた
vue.jsでimgの:srcを変更した際にローディングを表示したい(30974)|teratail

vue.jsの層ではなくて純粋にimgのload eventを参考にバインドをうまいことすればいいのかもしれない?
pxt | 画像のロード完了イベントを取得してみる

GitHub - hilongjw/vue-lazyloadを実際に動かして実験してみる。

Railsからvue-lazyloadを読み込むにはES6のimportが使えないと難しそうだ。
http://d.hatena.ne.jp/kitokitoki/20140906/p2
https://github.com/maccman/sprockets-commonjs
WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する - Qiita
Bring CommonJS to your asset pipeline - Arkency Blog

JS周りが結構変わっててnpmとか使う感じが強くなってる感じがする。
RailsでCoffeeScriptを共存させつつES6やJSXを使う方法 - Aqutras Members' Blog

時間的制約から、:srcの値をnullにしてその裏にz-indexでローディング画像を固定、その上で画像をローディングするように変更。これは上手く行かなかった。理由はnull突っ込んだ後にsrcに値を突っ込んでも、バインディングの性質上?後の値しかDOMに反映されなかった。

画像を複数枚並べておき、DIVからはみ出るようにしておいてoverflow: hiddenで何とかうまくいかないかな。結論めっちゃうまくいった。