沼だと思うけどみんなクリアしてるんだろうか。
前置き
jQueryをどう書けば優先順位をいじれるのかとか、逆にページを全部読み込んだ後の発火はどうしたらいいのかとか、割とずっと課題になってる感じがある。
$(function(){});
$(document).ready(function(){});
$(window).load(function () {});この辺りでどうのこうのって記事が多い。
jsの処理を早くしたいっていうのはわかる、デザインが崩れるとかっこ悪い。
だから脱jQueryとかで不要なものを取り除こうとかしてるんだろうね。
で、これらじゃ解決しなかった。
やりたいこと
画像を読み込んだ後にjs（jQuery）の処理をしたい。
どういうことかっていえば、要素のY座標を取得したいからそのように書いたんだけど要素の手前に画像があって、まだ画像が読み込まれてない（≒表示されてない）状態でY座標を取得しちゃうからだめじゃん、っていう感じのやつ。
結論
$(window).one('load',function(){
})これで書けば画像読み込み後に発火する。
ただし、この中で装飾したところで装飾の前後が目でわかるんでとんでもなくダサくなる。
画像ですら読み込みが遅いと表示過程が見えちゃうから、その後の動作となれば当然の話。
画像の先読み込み
headでpreloadを仕込んだら読み込みが多少早くなる。
こちらでは目に見えるレベルで改善した。
<link rel="preload" href="https://placehold.jp/1920x1080.png" as="image">上記jsを使わなくても、最速のjsでも処理が追いつく。だけど相変わらず過程がわかってしまうんでよろしくない。
ごまかす
画像を読み込んだ後にjsを起動させるのは、画像の読み込みを待つのと画像の読み込みを早くするので対応できるようになった。だけど、そこからの動作となるとワンテンポ遅れるんで、じゃあもうごまかすしかない。
時間差でフェードインさせるとかね。
Position = $('.object1').offset();
$('.object2').css('margin-top',Position.top).fadeIn();これならcss適用後に表示になるからなんとかなる。
仕方ないよなぁ
コメント