忍者ブログ
プログラムとちょっとショップとかの紹介とか、いろいろと載せておきます。
[913] [912] [911] [904] [903] [899] [898] [885] [884] [883] [882]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

画像の遅延読み込み

今の仕事で大量に画像を表示するのでとても表示が重いです。
これをなんとかできないかと探していたら、見つけたのでやってみました。



1. prototype.js をダウンロードして、設置する。


2. 表示HTMLは別にしてあるので、HEAD内に以下を書き込む

<script type="text/javascript" src="prototype.js"></script>
<!-- このscript タグの中でもPrototype.jsの機能が使えます。-->
<script type="text/javascript">
if (window.Prototype) {

Foo = {};
Foo.images = [];
Foo.stopLoadingImages = function() {
  $$("#foo img").each(function(image) {
    image.orgSrc = image.src;
    image.src = "1x1.gif";   // 小さな画像に置き換え
    Foo.images.push(image);  // 置き換えた要素をとっておく
  });
};
Foo.loadImages = function() {
  Foo.images.each(function(image) {
    image.src = image.orgSrc;  // 元の値に戻す
  });
};
 }>
</script>

3. BODY内の画像を含む範囲を以下で囲む。
<div id="foo">~</div>

これだけで表示が劇的に速くなりました!すげー!!


あとはCakePHPでどうやって使うかを調べればいいかな♪←仕事用として

PR

コメント


コメントフォーム
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字


忍者ブログ [PR]
ブログ内検索