私のスクリプトで問題が発生しました。DOM要素で挿入、削除などを行うと、スクロールが遅くなります。私はただ ajax リクエストを行い、それらを json として取得し、それらを html として DOM に追加します。
$.ajax({
url:"init_response_generator.php",
async:true,
type:"GET",
data:{init:1},
success:function(data)
{
console.log("success");
var results=$.parseJSON(data);
console.log(results[0].symposium[0].e_image_loc);
if(results.length!=0)
{
for(i=0;i<3;i++)
{
symposium ='<div class="thumbnail span3" onclick="show_event(\''+results[0].symposium[i].ev_id+'\');"><img src="'+results[0].symposium[i].e_image_loc+'" height="300" width="300"/><h5>'+results[0].symposium[i].e_title+'</h5></div>';
workshop ='<div class="thumbnail span3" onclick="show_event(\''+results[1].workshop[i].ev_id+'\');"><img src="'+results[1].workshop[i].e_image_loc+'" height="300" width="300"/><h5>'+results[1].workshop[i].e_title+'</h5></div>';
guest_lecture ='<div class="thumbnail span3" onclick="show_event(\''+results[2].guest_lecture[i].ev_id+'\');"><img src="'+results[2].guest_lecture[i].e_image_loc+'" height="300" width="300"/><h5>'+results[2].guest_lecture[i].e_title+'</h5></div>';
inauguration ='<div class="thumbnail span3" onclick="show_event(\''+results[3].inauguration[i].ev_id+'\');"><img src="'+results[3].inauguration[i].e_image_loc+'" height="300" width="300"/><h5>'+results[3].inauguration[i].e_title+'</h5></div>';
$("#symposium_thumbnails").append(symposium);
$("#inauguration_thumbnails").append(inauguration);
$("#workshop_thumbnails").append(workshop);
$("#guestlecture_thumbnails").append(guest_lecture);
}
}
} `