Hatena::ブログ(Diary)

湘南ぱいそん RSSフィード

2008-02-26

おっぱい/おしりビューワー


http://www.ueblog.org/blog/entry/randomtumblr/

jQueryはチェインできるのが売りなので

$("#photo_link")
  .attr("href", url)
  .attr("target", "_blank");
$("#photo_img")
  .fadeOut()
  .attr("src", photo_url)
  .fadeIn();

と書けて、selectが減る分たぶん速い。
また、辞書で一度にsetできる。

$("#photo_link").attr({
    "href" : result["url"],
    "target" : "_blank"
});

effectはcallbackを使うとお好みに制御できる。
最近のはendが使えて便利すぎる。
先読みしておくと、なお表示がスムーズ。

$("#photo_img")
    .fadeOut("nomal", function(){
      $(this).attr("src", src);
    })
    .parent().attr("href", result["url"]).end()
    .fadeIn();

readyは省略できる。
setInterval/setTimeoutを放っておくとメモリリークするとかしないとか。

$(function () {
  ...
  tumblr_image_jsonp();
  setInterval(tumblr_image_jsonp, 8000);
});

JavaScriptの関数呼び出しは重いらしいので控える。

function tumblr_image_jsonp() {
    $.getJSONP("http://ueblog.tumblr.com/api/read/json?callback=tumblr_image&type=photo&num=1&start="
        + Math.floor(Math.random() * tumblr_api_read["posts-total"]),
    tumblr_image);
}

XHTMLで書こう。charsetもしっかり書こう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

で、まとめるとこう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Random Tumblr - ueblog</title>
        <script type="text/javascript"
            src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript"
            src="http://ueblog.tumblr.com/api/read/json?num=1&type=photo"></script>
        <script type="text/javascript"
            src="http://iandeth.dyndns.org/mt/ian/archives/jquery_jsonp_plugin/jquery.jsonp.js"></script>
        <script type="text/javascript">

            function tumblr_image_jsonp() {
                $.getJSONP("http://ueblog.tumblr.com/api/read/json?callback=tumblr_image&type=photo&num=1&start="
                    + Math.floor(Math.random() * tumblr_api_read["posts-total"]),
                tumblr_image);
            }

            function tumblr_image(json) {
                var result = json.posts[0];
                var buffer = $("#buffer>a").clone();
                $("#photo")
                    .fadeOut("nomal", function(){
                        $(this).html(buffer);
                    })
                    .fadeIn();
                $("#buffer>a")
                    .attr("href", result["url"])
                    .children("img")
                        .attr("src", result["photo-url-500"]);
            }

            function interval(func, time) {
                func();
                var i = setTimeout(function(){
                    clearTimeout(i);
                    i = null;
                    interval(func, time);
                }, time);
            }

            $(function () {
                interval(tumblr_image_jsonp, 8000);
            });
        </script>
    </head>
    <body>
        <div id="photo"></div>
        <div id="buffer" style="display:none;">
            <a href="" target="_blank">
                <img src="http://assets.tumblr.com/images/apple_touch_icon.png"/>
            </a>
        </div>
    </body>
</html>

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/MiCHiLU/20080226/1203955481
Connection: close