トップページ | 過去記事(月別カテゴリー別) | 掲示板 | 野良DEB,RPM | 更新チェック | Twitter
<<  2011.3  >>
SMTWTFS
  12345
6789101112
13141516171819
20212223242526
2728293031  
 
リンク
その他
  • RSS2.0
  • Credit

  • SEO
    loading

    プライバシーポリシー
    Google

カテゴリー » 戯言 March 20, 2011

今更ながらブログにLightboxを導入し、そのリンク先の画像を先読み

うにょーんと画像が出るLightboxの表示方法、少し前まで大嫌いでしたが、最近は悪くないんじゃね? と思い始めた今日この頃。
Lightbox Plusを設置してみました。リンク先の画像がオーバレイで表示されます。「任意の場所のクリックで閉じる」「大きい画像はウィンドウから出ないように自動縮小」の機能がいい感じ。拡大機能もあるけど、閉じるのがダブルクリックになるので無効にしておく。絶対混乱すると思う。


ここからが本題(?)です。Lightboxの読み込み時間って、なんか知らんけど体感的に長く感じますよね。ムカツキますよね。殺意が湧きますよね。できるだけ閲覧者の血圧を上げないようにするため、リンク先の画像を先読みさせたいと思いました。検索するとjQuery.Preloadを発見。

下のような rel="lightbox" を付けたリンクを先読みさせるには
<a href="image.png" rel="lightbox"><img src="image-thumb.png" /></a>
これで自動ロードされる…はず。
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.preload-min.js"></script>
<script type="text/javascript">
$(function(){
  $("a[rel^=lightbox]").preload({ threshold:1 });
});
</script>

≪追記≫
キャッシュを無視して再読み込みするたび画像を取りに行く?

≪追記≫
プリロードを使わなくても、サムネイルにリンク先の画像を直接指定すればいいような気がしてきた。サムネイルの読み込みに時間が掛かるようになるけど。
<a href="image.png" rel="lightbox"><img src="image.png" width="300" height="300" /></a>
03:34 am | コメントする |

上の記事に対するコメント

1. shin  2011/03/20 08:36
結局、どこかで時間が掛かって、なにかでリソースを消費する訳ですよね?
だったら、閲覧者が時間やリソースの消費を制御できた方がありがたいです。
つまり、サムネイルで満足ならオリジナルを見る時と同じリソースを割く必要は
ないはずです。
また、オリジナルを見る為にクリックしたのに結局ウィンドウサイズに自動縮小
された画像を見せられるしまうLightboxは、はっきり言って「ウザイ」の一言で
すね。

2. Owner CommentSawa  2011/03/20 23:57
画像を見るかどうかは人それぞれだから勝手に読み込むな、見せ方を強制するな、ですね。ウザい気持ちよく分かります。

このサイトのブログシステム(ppBlog)って、JavaScriptのページ内ポップアップ(新しいバージョンではLightbox)で画像を表示するのが本来の仕様だったりします。ウザいので最初に機能を殺しました。

でも近頃、ページの切り替え無しで表示できて見やすいかも…と思ってきました。このブログで画像なんてほとんど扱ってないし、どうでもいいのですが、飽きるまで自己満足で使ってみるつもりです。強制といえば、target="_blank" も昔は大嫌いでした。でも今は _blank されている方が好きです。


累計:436451、今日:2475、昨日:1927
Created in 0.0168 sec.