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

hysysk:blog: jquery loading test

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

Ajaxload - Ajax loading gif generator

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

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);  
  
}

Comments


(Option)

(Option)