超超初心者向け漫画サイトのつくり方【レイジーロードを実装する】

jQueryなしのプラグインで実装します。

どうやら、今後(時期不明)めちゃ簡単に実装できるようになるみたいなのでプラグインを使ってまで実装するべきかどうかは考える所です。

すでに縦スクロールタイプの漫画サイトを運営していて、画像表示時間に悩んでいる方は実装必須です。

とりあえず、デモつくってみたので確認してみてください~。

低画質のモノクロ画像が表示され、しばらく待つと高画質のカラー画像が表示されます。(結構待つよ!!)

!IE(インターネットエクスプローラー)では思ったように動きません。chrome、Edgeなどでご覧ください。

デモページ

パシュっと光るようにして、カラー画像が表示されましたよね。

光るのがイヤ。って事なら、画像8枚目のトラのようにしてみましょー。

雑な力業なので、完成度はアレですが(´・ω・)スミマセン…

全く光らないようにするには、フェードインエフェクトを解除すれば大丈夫です。

レイジーロードの準備

今回は、ダウンロードのみでいきます~

lazy loadのダウンロード

「lazy load」で検索しても出てくると思います。ただ、lazy loadって色々種類があるので今回紹介するものを用意してください。

↓のページの、赤枠部分をクリック

すると、何か聞かれると思います。zipを選択。

zipがダウンロードできたら、解凍しましょー。

開いたフォルダになればOK

この中に、デモが入っているのですが………私には解読が難しかったです。

まぁそんな感じの知識ですので、期待せず続きをどうぞ!

 

解凍したフォルダの中で、使うのは↓です。

htmlと同じフォルダ内に移動させておいてください。

画像の準備

高画質画像と、低画質画像の2種類を準備します。

漫画ページを2種類も用意するのは面倒くさい。って人は高画質画像のみでOKです。その場合は記述が少し違ってきます。

デモページでは、高画質が8,000KBくらい、低画質が15KBくらいです。

8,000KBは、デモ用に用意しただけで、こんな重たい画像を載せてはダメです。

htmlの記述

画像を読み込む記述をします。

<img src="低画質画像" data-src="高画質画像" alt="画像の説明文" class="lazy">

srcで、低画質画像を読み込んで、data-srcで、本来表示したい高画質画像を読み込みます。

クラス名で、lazy と名前を付けておきます。

低画質画像を用意しない場合は、srcの記述はナシでOKです。

lazy load本体も、読み込んでおきましょー

<script src="lazyload.min.js"></script>

<head>~</head>内…ではなく、scriptの記述の直前で読み込んでおいてください。

cssの記述

基本部分は、今回は省略します。(真ん中寄せとか、そんな所は省略!)

フェードインエフェクトのみ紹介します。

.loaded {
  animation: fadein 1s ease-in;
}

@keyframes fadein {
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

パシュっと光る(ように見える)表示がイヤなら、この記述はしないでください。

低画質から高画質へ移る時のエフェクトなので、ナシでもレイジーロードの動作には何の問題もありません。

scriptの記述

先に白状しておきます。

私、JavaScriptほとんど分からないです。読むことすらできません。

記述内容は、作者さんが用意してくれているデモページの記述をまるっとコピーして、要らなそうな所をちょこっと削っただけです。

それでも動いてくれたので、紹介したいと思います。説明はできません。

<script>
(function () {
  function logElementEvent(eventName, element) {
    console.log(
    Date.now(),
    eventName,
    element.getAttribute("data-src")
  );
}
ll = new LazyLoad({
  elements_selector: ".lazy",
  load_delay: 300
});
})();
</script>

はい。全く分かりません。

辛うじてわかるのが、最後の方の「load_delay:300」

ワンテンポ遅れて表示してくれます。さっさと出してほしいなら、記述しなくてもいいかも。わかんないけど。。。。。。(ヤクタタズ)

こんなに分からない私が記述を削ったりしているので、不安だったらダウンロードしたデモページのコードをまるっとコピーして貼り付けてみてください。

テキストエディタで開けば、コードを見ることができます。

まとめ

もーやだーってなっていませんか?大丈夫ですか?

私はなりました。もーやだー。

jQuery使おうよーって思いました。いえ、私、jQueryもそんなに分からないんですけど。。。まだマシっていうか。。。

早く、簡単なlazy load登場して欲しいです。

まぁ、来たとしてもIEは非対応だと思いますけどね。なぜ足並みを揃えないの。IEよ…。

パシュって光らないフェードインについて一応書いておきます。

全然スマートじゃない力業です。

用意する画像の、低画質版を透過pngにして不透明度50%にしておく。それだけです。

これで、高画質jpg(pngでもいいよ)が読み込まれた時の不透明度と同じ不透明度になるので、光ったようには見えない。はず。

ん?

……いま思ったんですが。

縦スクロールタイプの漫画なら、するするスクロール設置しますよね。

じゃ、jQuery使いますよね。

…………

どうせ使うなら、jQueryでレイジーロード実装すればいいじゃーーーん

うわーーーん(ノД`)・゜・。

 

jQuery離れという話に振り回されました。。。

jQuery、まだまだ使おう。

コメント