0

ユーザーがセルのリストを表示できるアプリケーションがあります。セルごとに、ユーザーはセルの 2 つの画像をポップアップ メニューとして表示できます。問題は、リストを選択するとすべての画像がダウンロードされるため、ページが非常に遅くなることです。マウスがリンクの上に置かれた場合にのみ画像がダウンロードされるようにしたいと思います。情報: DOM ポップアップ キットのリンク テキストを使用しています

ここにメインページとポップアップメニューへのリンクがあります

<div id="span_div">
    <span id="cell_link_<%= @cell.cellid %>" class="popup_link" Popup.modal = true><%= @cell.cellname%>
     <%= render :partial => 'cell_popup' %>
     <%= javascript_tag "new Popup('cell_popup_#{@cell.cellid}','cell_link_#{@cell.cellid}')" %>
    </span>
  </div>

ここにセル画像の部分があります

<div id="cell_popup_<%= @cell.cellid %>" class="popup popup_draghandle" style="display:none">
<table width="418" border="0">
  <tr>
    <td width="201" align="center" valign="top">Raw</td>
    <td width="201" align="center" valign="top">Repaired</td>
  </tr>
  <tr>
    <td align="center" valign="top">
        <% if @full_report == true then%>
        <%raw_morph = @raw_morph.last%>
        <img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer',:morph_id => raw_morph.morphologyid)%>" alt="" width="200" height="200"/>
        <%end%>
    </td>
    <td align="center" valign="top">
        <%if @repaired == true then%>
        <%repaired_morph = @repaired_morph.last%>
        <img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer', :morph_id => repaired_morph.morphologyid)%>" alt="" width="200" height="200"/>

    </td>
  </tr>
  <%end%>
</table>

誰でもそれを行う考えがありますか?

4

1 に答える 1

1

基本的には、AJAX 要求で画像をロードするスパンのマウスオーバー アクションを作成するという考え方です。キャッシュ変数を使用して、1 回のページ読み込みで同じリクエストを複数回行わないようにします。

以下はPrototypeを想定しています。テストする時間がないので、完璧な例を期待しないでください。

ほとんどの作業は、on mouseover 属性をスパンに追加することによって行われます。

<span id="cell_link_<%= @cell.cellid %>" class="popup_link" Popup.modal = true 
  onmouseover="<%=remote_function(:update => "cell_popup_#{@cell.cellid}", 
    :url => 
      popup_cell_url(@cell, :full_report => @full_report, :repaired => @repared),
    :success => "cell_#{@cell.cellid}_loaded = true", 
    :conditions => "cell_#{@cell.cellid}_loaded == false") %>"
 ><%= @cell.cellname%>

次に、クリーンアップします。

パーシャル内の div 以外のすべてを cell というビューに移動します。空白を一般的な Fetching images メッセージで埋めます。

したがって、パーシャルは次のようになります。

<div id="cell_popup_<%= @cell.cellid %>" class="popup popup_draghandle" style="display:none">
  Fetching images. Please stand by.
</div>

popup と呼ばれる新しいビューは次のようになります。

<table width="418" border="0">
  <tr>
    <td width="201" align="center" valign="top">Raw</td>
    <td width="201" align="center" valign="top">Repaired</td>
  </tr>
  <tr>
    <td align="center" valign="top">
        <% if @full_report == true then%>
                <%raw_morph = @raw_morph.last%>
                <img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer',:morph_id => raw_morph.morphologyid)%>" alt="" width="200" height="200"/>
                <%end%>
    </td>
    <td align="center" valign="top">
        <%if @repaired == true then%>
                <%repaired_morph = @repaired_morph.last%>
                <img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer', :morph_id => repaired_morph.morphologyid)%>" alt="" width="200" height="200"/>
        <%end%>
    </td>
  </tr>

</table>

あとは、コントローラーを新しいビューに接続し、AJAX 用に準備するだけです。セル コントローラーの get に応答するポップアップ ルートを追加します。

 map.resources :cells, :member => {:popup => :post}

アクションを CellsController に追加する

def popup
  # sets @cell, @repaired, @full_report, @raw_morph, 
  # @repaired_morph and anything else needed by the popup view.
end
于 2009-11-20T15:39:03.133 に答える