ruby-on-rails 通过使用相同的视图样板延迟加载的框架

tmb3ates  于 2023-05-08  发布在  Ruby
关注(0)|答案(1)|浏览(80)

在一个长网页的底部(即在视图模板中,比如long_page.html.erb),我有一些沉重内容会减慢页面加载速度。
因为这些重内容被放置在页面的底部,而且用户并不总是滚动到页面的底部,所以我想使用一个lazy-loaded <turbo-frame>,这样重内容只有在用户滚动页面底部时才被加载,这显然提高了页面的整体加载性能。
我如何在同一个视图模板中使用适当的<turbo-frame>设置,这将避免我创建新的控制器操作和新的视图模板?
在这个长长的网页的底部,我试着添加了这样的内容:

# long_page.html.erb

<turbo-frame id="heavy_content_inside" loading="lazy" src="path/to/long_page">
                                                           ^^^^^^^^^^^^^^^^^
  <% # heavy computed content that slows down page loading %>

</turbo-frame>

但我在控制台中得到错误:
错误:匹配元素具有引用其自身的源URL

a5g8bdjr

a5g8bdjr1#

# long_page.html.erb

# ...

<% if params[:lazy_loading] %>
  <turbo-frame id="heavy_content_inside">
    <% # heavy computed content that slows down page loading %>
  </turbo-frame>
<% else %>
  <turbo-frame id="heavy_content_inside" loading="lazy" src="path/to/long_page?lazy_loading=true"></turbo-frame>
<% end %>

相关问题