image - 滚动时如何优化网络/移动网络上的图像加载

Question

当图像加载时，我现在正在通过我的模板加载所有图像

 //For example, I will just pass the image url into the tempate when the page renders
  %div{class: "img_container <%= answer.image_scale %> <%=answer.show_image%>"}
    <% if (media_con.standard_resolution) { %>
    %a.fancy{href: "<%= media_con.standard_resolution %>"}
      %img{src: "<%=media_con.standard_resolution%>"}

我意识到通过这样做（特别是如果我在页面上加载许多图像），它会导致效率低下，特别是在移动网络上很明显。

我如何才能仅在视图中加载图像（滚动），也许只是加载缩略图并在带有图像的视图出现时加载实际图像。

任何建议在这里表示赞赏

Answer 1

有许多库可以实现这一点。我个人使用了jQuery 的延迟加载插件（演示）。而不是在模板中设置<img src>属性，您应该设置一个名为data-original图像 url 的属性：

%img{data-original: "<%=media_con.standard_resolution%>", src="placeholder.png"}

在客户端代码（可能在 中Backbone.view.render）您初始化库：

$("img[data-original]").lazyload();