| @技術/プログラミング
クリックした後にしばらく経ってから続きの部分が表示されるだけだとつまらないから、クリックしてから続きが読み込まれるまでの間にローディングgifが表示されるようにしてみた。参考にさせてもらったのは...

クリックした後にしばらく経ってから続きの部分が表示されるだけだとつまらないから、クリックしてから続きが読み込まれるまでの間にローディングgifが表示されるようにしてみた。参考にさせてもらったのはhysyskさんのブログ。

ローディングgifはこちらで作った。

コードはこんな感じ。よかったらどなたか添削してください。

function readMore(x) {  
  
	// format vars
	var id = x.replace("#", "");
	var loadPath = '/article.php?id=' + id + ' div#wrapper div[class=comment entry-content]';
	var rm = x + ' p.read-more a';  
  
	// hide read-more  
	$(rm).hide();  
  
	// write ajax-loader.gif
	$(x).append('<div id="loading" style="text-align: right; position: relative; top: -28px;"><img src="./images/ajax-loader.gif" width="28" height="28" /></div>');  
  
	// show and hide ajax-loader.gif
	$("#loading").bind("ajaxSend", function() {
		$(this).show();
	}).bind("ajaxComplete", function() {
		$(this).fadeOut("slow");
	});  
  
	// load rest of content
	$(x).load(loadPath);  
  
}

この記事に似ている記事

  • 1032 dsc 2695
    jQueryを使って、「もっと読む」をインタラクティブにした。これまでもjQueryを使って細工してたんですけど、slideToggle() で先読みしたものを隠しておいて、クリックで展開するという感じにしてた。まぁこれでも良いんだけど、Aj...
  • Screenshot
    最近のコメントのページ(Recent Comments)で、各コメントのタイトルにマウスオーバーするとコメントの本文を取ってきてぬるっと表示するようにした。Tumblrの notes を読み込むときみたいなアクション。結構かっこいい。コードは...
  • Screenshot
    ポータルシットのコメント一覧ページで、マウスオーバーして全文を取得するやつをかっこよくした。これまではjQueryでスクレイピングして、記事のパーマリンクからコメントを取得していた。しかしこれは無駄なクエリが発生する。記事本文を取得するクエリ...
  • Screenshot
     SafariやP_BLOG用のバナーを使わせてもらっている trifles さんを覗いていたら、記事タイトルに記事のPermalinkをリンクする方法が紹介されていた(trifles : 記事タイトルから個別ページにリンク)。他のブログツー...
  • Screenshot
    遅ればせながら、LDRizeとMinibufferというGreasemonkeyをFIrefoxに入れてみました。GoogleやTwitterやTumblrの閲覧が劇的に改善されます。いままでメリットが分からず入れてなかったんだけど、アホです...
  • Screenshot
    ここにはっつけるコードのシンタックスハイライトには Google Code Prettify をこれまで使ってたんですけど、どうもいまいちでした。有名な SyntaxHighlighter も好きになれなかった。はてなブログのように綺麗なシン...

Comments


(Option)

(Option)