よく検索されるキーワード
ブログカード
TOC
初心者向け
トラブル対処
RWD
Validation
SEO
Tips
Smartphone
Responsive
Playground
上級者向け
Log In
Index
Categories
テンプレート (172)
配布中テンプレート (65)
ブログ内限定配布 (7)
リリーステンプレート早見表(表示タイプ別) (1)
配布終了・旧作 (30)
テンプレ不具合・修正など (69)
利用上のお願い (1)
よくあるご質問「お困りですか?」 (3)
ご質問の前に (2)
FC2不具合情報 (28)
割と重要なお知らせ (36)
カスタマイズ (174)
HTML, CSS, JavaScript (100)
遊び (19)
SNS (4)
FC2ブログのあれこれ (149)
webのあれこれ (66)
他社ブログ (9)
webツール (13)
マガブロ (1)
雑記 (6)
テスト用非公開 (6)
未分類(個人的テスト等) (23)
ホーム
コメントの編集
根本的にlazyload全般がスクロール系と相性が悪いですよ。 以降の内容はナチュログの仕様は全くわかりませんので当て推量になります。 遅延読み込みはthreshold(スレショルド, しきい値)という概念が必ず必要です。あるいはoffset(オフセット)という呼称でも良いです。 また詳しく説明記事は書きますが、ナチュログさんのthreshold設定がどうなっているかにもよりますし、src属性及びwidth/ height属性が書いてあるかどうかも関わりがあります。 width/ heighについて 本件の場合はwidthよりもheight属性ですね。height="auto"またはstyle="height: auto;"または数値指定なしの場合とheightに具体的な数値(px)が記されている時との違いは、表示場所をhtml解釈時に事前に作っておくことができるかどうかです。 数値指定があるとsrcの読み込みが済んでいなくても場所だけ空白状態で確保できます。 ですがレスポンシブでそれは土台無理なんです。 「レスポンシブデザインテンプレートでは」という意味ではなく、PCテンプレが固定幅であろうとスマートフォンというデバイスが存在する以上、記事は共通でもレイアウトは変えなければいけませんよね。 つまりheightはどのみち流動的になる、ということです。 記事内にhtmlで絶対数値が記されていて横幅が300以上ある場合、スマホでははみ出すか縦横比を保って縮小されるかのいずれかです。 はみ出す場合にはべえさんがおっしゃる「位置ずれ」は起こりません。 ただそれが良いかどうかは別問題。 thresholdについて 画面に入る直前の何pxで読み込みを開始するかの設定です。 lazyload系のデフォルトは大体200〜300px設定が多いと思います。 この数値を増やすとひとつの対処になるかと思います。 その代わり画面の遠くに居る画像も読み込まれることになりますのでlazyloadのパワーはダウンしますね。 結局なんでも「選択」です。そちらについても記事に書くつもりでいますけれど、全て完璧な状態というのは不可能です。 先日も記事にしましたが、例えば「スピード」に重きを置くのであれば500pxで掲載したい画像はCSSやhtml属性で1000px原寸をサイズ指定で操作するのではなく500pxに画像編集をして掲載しなさいよ、と。 でも今度は「解像度」に重きを置くのであれば500pxで載せたい画像は500px原寸にしてしまうとひどくぼやけるので1000pxにしなさいよ、と。 こういった真逆思考が常に存在しますので、自分がどこに一番の軸を据えるかの選択です。 > Lazy Load の時のほうがスクロールするたびに画像が読み込まれる感じ(実際そうなんですが)で遅く感じました〜 これはたぶんね、べえさんが「記事を読んでいないから」です。 記事を書いた人間というのは自分の記事を誤字脱字チェック以外で読み返すことってあまり無いんですね。 じゃあページを開いて何をするかというと「動作確認」です。 スクロールのボタンを押してみる、などがそうです。 でも記事を読んでいる人というのはいきなりガーーーっとスクロールを始めることはまず無いわけなんですよ。 ですから画像がゆっくり表示されても苦にはならないんですね。 閲覧者が一番苦にするのは初回ロードの速さ(遅さ)です。そのための対策の一つがレイジーロードです。 またある人は「ゆっくり表示される」ことを「遅い」と感じる方も居ます。 これは個々の感じ方ですよね。 ナチュログがいきなり表示なのかopacity 0からopacity 1へ移行させることでフワっと感を出しているのかわかりませんが、opacityが気になる場合には完全透明から完全不透明になるまでの秒数を整理するとか。 まぁ色々な対処がありますね (´・ω・`) lazyloadの意義というのは「初回ロード」であって。 画面に収まっていようといまいとhtmlに書いてある要素は全て一度に読み込まれますので、その中から画像だけは省いておきましょう、というのが目的ですからロード自体は確実に負荷が軽減されているはずです。 なのでデザインコントロールの面で「体感として遅く感じる」のかなぁ、と思います。 わかんないけど(笑)
管理者にだけ表示を許可する
送信
削除