Question

我有一个应用程序，用户可以在其中查看单元格列表。对于每个单元格，用户可以看到单元格的两个图像作为弹出菜单。问题是，当选择列表并且使我的页面非常慢时，所有图像都会被下载。我希望只有当鼠标滚过链接时才会下载图像。有关信息：我正在使用DOM弹出工具包link text

这是弹出菜单的主页面和链接

<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>

有人有任何想法吗？

Answer 1

本质上，我们的想法是为您的span创建一个on mouseover动作，使用AJAX请求加载图像。我们将使用缓存变量来确保您在一页加载中不会多次发出相同的请求。

以下假设为Prototype。我没时间测试它，所以不要指望一个完美无瑕的例子。

大部分工作都是通过在span上添加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图像消息填充空白。

所以你的部分现在看起来像：

<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

如何用rails上的ruby控制弹出窗口，鼠标翻转

1 个答案: