def bagfactor sleep(2) rand(50) / 10.0 end
Up to... | User response |
---|---|
0.1 second | instantaneous |
1 second | responsive |
10 seconds | slow |
> 10 seconds | gone |
– About Face 3
http://dbdb.local/class DbsController < ApplicationController def show @db = Db.find(params[:id]) respond_to do |format| format.html format.js do render :partial => "profile", :locals => { :db => @db } end end end end
$(".db-list a").one("click", function() { var link = $(this); $.ajax({ url: this.href, success: function(src) { var bio = $("<dd>" + src + "</dd>"); link.parents("dt").after(bio); link.click(function() { bio.toggle(); return false; }); } }); return false; });
$(".db-list a").one("click", function() { var link = $(this); var bio = $("<dd></dd>"); bio.load( this.href + " dd > *", function() { link.parents("dt").after(bio); link.click(function() { bio.toggle(); return false; }); return true; } ); return false; });
$(".db-list a").one("click", function() { var link = $(this); var bio = $('<dd class="spinner"></dd>'); link.parents("dt").after(bio); bio.hide().slideDown("slow"); link.click(function() { bio.slideToggle(); return false; }); $.ajax({ url: this.href, success: function(src) { bio.html(src).removeClass("spinner"); } }); return false; });
$(".db-list a").each(function() { var link = $(this); var bio = $('<dd class="spinner"></dd>').hide(); link.parents("dt").after(bio); link.click(function() { bio.slideToggle(); return false; }); }); $.fn.loadContentInOrder = function() { return this.each(function() { var link = $(this); $.ajax({ url: this.href, success: function(src) { link.parents("dt").next("dd").html(src) .removeClass("spinner") .next("dt").find("a").loadContentInOrder(); } }); }); }; $(".db-list a:first").loadContentInOrder();
{ db: { id: 13, name: "Tyler Hansbrough", occupation: "UNC Basketball Player", bagfactor: 1.3, avatar_id: 61 } }
class DbsController < ApplicationController def show @db = Db.find(params[:id]) respond_to do |format| format.html format.js { ... } format.json do render :json => { :bagfactor => @db.bagfactor } end end end end
jQuery.fn.loadBagfactor = function() { var img = $(this); $.ajax({ url: $("a", img.parents("dd").prev("dt")).attr("href"), data: { format: "json" }, dataType: "json", success: function(db) { img.replaceWith(db.bagfactor); $("img.spinner:first").loadBagfactor(); } }); }; $("img.spinner:first").loadBagfactor();
<% form_for @avatar, :html => { :multipart => true } do |f| %> <%= f.file_field :image %> <% end %> <% javascript_tag do %> $("input").change(function() { $(this).hide().after('<%= image_tag "spinner.gif" %>'); $(this).parents('form').submit(); }); <% end %>
<%= image_tag @avatar.image.url(:thumb) %> <% javascript_tag do %> $("form", top.document).append( '<%= hidden_field_tag "db[avatar_id]", @avatar.id %>'); <% end %>
$("input[type=file]").replaceWith( '<iframe src="/avatars/new"></iframe>');
(It doesn't matter)
“At least 80 percent of the time it takes to display a web page happens after the HTML document has been downloaded.”
— Steve Souders, High Performance Web Sites
expires
headerlink_to_remote
Helper<%= link_to_remote @db.name, :url => db_url(@db), :method => :get %>
# <%= link_to_remote @db.name, :url => db_url(@db), # :method => :get %> <a href="#" onclick="$.ajax({data:'authenticity_token=' + encodeURIComponent('2b79b50423e099...'), dataType:'script', type:'get', url:'http://dbdb.local/dbs/13'}); return false;"> Tyler Hansbrough </a>
# <%= link_to_remote @db.name, :url => db_url(@db), # :method => :get %> <a href="/dbs/13" data-remote="true" data-method="get"> Tyler Hansbrough </a>
# <%= link_to_remote @db.name, :url => db_url(@db), # :method => :get %> # <a href="/dbs/13" data-remote="true" data-method="get"> # Tyler Hansbrough # </a> var request = function(options) { $.ajax($.extend({ url : options.url, type : 'get' }, options)); return false; }; $('a[data-remote=true]').live('click', function() { return request({ url : this.href }); }); $('form[data-remote=true]').live('submit', function() { return request({ url : this.action, type : this.method, data : $(this).serialize() }); });
# <a href="/dbs/13" class="remote"> # Tyler Hansbrough # </a> var request = function(options) { $.ajax($.extend({ url : options.url, type : 'get' }, options)); return false; }; $("a.remote").click(function() { return request({ url : this.href }); });