「 javascript 」一覧

ブログの画像を後から読み込んでページを軽くするjavascript

このブログは結構写真を載せている。
元画像から縮小して小さくしているものの、そのサイズは大きく表示が遅くなっている。
そこで今回紹介する画像の遅延読み込みをするためのjavascriptプラグインの出番である。

ダウンロード

Lazy Load Plugin for jQuery
英語のサイトだけど下の方にスクロールするとdownloadがあるから、
sourceの方でもminifiedの方でも好きな方を右クリックでダウンロードしよう。

なぜこのプラグインなのか?

このプラグインを選んだ理由を書いておこう。
画像関係のプラグインでlightboxって言うのがあって、これは画像をクリックすると『うにょ~ん』と画像がポップアップしてくるやつだ。
そのlightboxで僕が使っている『WordPress用lightboxプラグイン作ってみた』と共存できるのが一番の理由だ。
今回紹介した以外の遅延読み込みに関しては『画像の遅延読み込み』を参考にして貰えば良いと思う。

使い方

このjavascriptはjQueryって言う物も必要だ。
ブログで既に使っている場合は良いんだけど、まだの時は以下のコードをヘッダー内に追加しておこう。
[javascript]


[/javascript]

Lazy Load Plugin for jQuery』をダウンロードしたら、アップロードしそれを読み込んで実行するコードも追加する。
[javascript]


[/javascript]
基本的にはこれで終了。example.comの部分は自分の環境に合わせて変更してね。

おまけの設定

この画像遅延読み込みには設定が少し出来る。
詳しくはプラグインの名前で検索してもらうとして、僕が設定している物を紹介しておく。
[javascript]

[/javascript]
まず、『$(“#left-col img”)』だけど、このブログの記事部分だけにこのプラグインを有効するための記述。
サイドバーとかフッターとかはこのプラグインによる遅延読み込みがされないようにした。
htmlでいうid=”left-col”の部分だけに適用されるのだ。

次に『placeholder:”http://www.hosimitu.com/img/grey.gif”,』だけど、これは画像の遅延読み込みをする前に置き換える画像を指定している。
基本的に設定する必要がない物なんだけど、設定しておくと画像が読み込まれる間もブログの記事がさみしくなくなる。
ペイントなんかを使って1×1の大きさの画像を自分で用意すればOK。

最後の『effect:”fadeIn”』は画像の読み込みが終了した時の表示方法の指定だ。
フェードインする設定にしたんだけど、その理由はその方がカッコイイと思ったからです。


無駄にjQueryを使ってトップ画像をランダム表示にした

これまでトップのタイトル画像はphpを使ってランダムに表示していた
phpでランダムに表示する前はjavascriptを使って表示していたんだけど、今回またjavascriptに戻した。

なぜまた差し替えたかというと、少しでもブログの記事部分の表示を速くしようと思ったからだ。
javascriptで作られた物の中に『jQuery』って言う物がある。
それを使うとページの骨格が表示された後に遅れて画像を読み込むと言う事が出来る。
今回それを利用してみた。
なので今回のものはjQueryがすでに読み込んであるものとして話を進める。
読み込んでない場合はヘッダー部分に以下を書き加えておこう。
[javascript]


[/javascript]

ダウンロード

トップ画像ランダム表示するjavascriptをダウンロードする

使い方

まずヘッダーかフッター部分に上でダウンロードした『jquery.topimagerand.js』を読み込む。
そしてつぎに実行する部分を書く。
[javascript]
/* 読み込み */

/* 実行する部分 */

[/javascript]
『http://www.example/js/jquery.topimagerand.js』の部分は自分のブログに合わせてください。
『#header』は『id=”header”』の場合で、『class=”header”』の場合は『.header』となる。
画像をランダムに表示したい場所に合わせて書き換えてください。

これで終了、と思わせておいてまだ続く。
『jquery.topimagerand.js』をテキストエディターで開いて、使用するタイトル画像のURLを書き加える必要がある。
11行目くらいにある下の部分を書き換えよう。
[html toolbar=false]
img[0] = “トップ画像 その1”;
img[1] = “トップ画像 その2”;
img[2] = “トップ画像 その3”;
[/html]
画像をもっと使う場合は数字を増やしていくだけでOK。
そして以下の部分も自分のブログに合わせて書き換える。
[javascript]
target.append(‘ブログタイトル‘);
[/javascript]

これで一通りの設定等は終わりです。


ブログタイトルのランダム表示

ブログのタイトルをランダム表示するようにしてみた。
かなり画像がでかいんだけど、一応幅720pxで高さが200pxの大きさ。
幅は720pxじゃないとだめだけど、高さはいくらでも(*`д´)b OK!
ランダム表示にするために参考にしたところはここ
ジャバスクリプトを使ってランダム表示させてるんだけど、
ジャバスクリプトを切ったら以前のように表示させることができる。

少しの間このランダム表示で行くことにするんで、画像を募集しようかな。
まずこないと思うけど(;^ω^)
守らなければならないのは幅720pxで高さは100px以上。
あとタイトルが入っていればなんでも良い。
自分で作るのは、アイデアの枯渇という建前で
元画像を見つけるのがめんどいから・・・


スポンサーリンク
スポンサーリンク
スポンサーリンク