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で何とかうまくいかないかな。結論めっちゃうまくいった。