「jquery.lazyload.jsは意味ない」…そんなことありません。 | φ(..)メモとして残しておこう…

「jquery.lazyload.jsは意味ない」…そんなことありません。



最近、あちこちのブログで


DOM Readyの時点で画像のリクエストは走っているので、その後src属性を空にしてもとき既にお寿司で、スクロールして表示したときにsrc属性をつっこんだらまたリクエストが発生するので意味なし…


的な記事をよく見かけるのですが、その情報、もう古いです。

http://ameblo.jp/webmage/entry-11191128239.html

上記の記事を良く読んでください。

要は、過った使い方をしているので期待通りの動きにならない…というだけなのではないかと。


論より証拠…ということで、ちょろめのデベロッパーツールで確認してみました。


検証に使用したサイトは「沖縄のキャバクラを紹介するこちらのサイト」です。



デベロッパーツールの「Network」タブを開いて「Shiftキーを押しながらリロード」してみてください。
「Shiftキーを押しながらリロード」すると、キャッシュが無効になって全ての画像をサーバーから読み込むようになります。

一旦、読み込みが完了したら、画面を下の方にスクロールするか「PICKUP-GIRL」をクリックして見てください。

ちゃんと新たに画像が遅延ロードされるはずです。


swipeにも対応したイメージスライダー「jQuery.flex-slider」を試してみた。

上記のプラグインにも、不具合があったりしましたが、修正をすればいいわけで。
(コメントで不具合が寄せられたので、コメントで修正をレクチャーしました)


どのようなプラグインもそうですが、ほとんどはフリーで使えるソースなわけで、不具合云々の対応は使う側でするのが基本です。


フリーのプラグインを使用する場合には、一度ソースコードに目を通してみることをオススメします。


そのあたりが出来て初めてプロのHTMLコーダーとしてやっていけるんじゃyないかな…とか思ったり思わなかったり。


ちょうど、Webプログラムの勉強を始めて、今月でちょうど2年が経ちました。

思えば、2年前の今頃はプログラムの「プ」の字もわからなくて、

「とりあえずサーバーサイドはPHPでクライアントサイドはHTML+CSS+JavaScriptをやってれば喰っていけそう…」

とか思ってスタートしたわけですが、今のところは自分の選択が間違っていなかったと思ってます。

EC-CUBEに出会ったのも大きかったなぁ。


とりあえず、3年目もがむしゃらにがんばろっと。