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

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

有许多库可以实现这一点。我个人将Lazy Load Plugin 用于jQuery (demo)。与其在模板中设置<img src> 属性，不如在图片的url 中设置一个名为data-original 的属性：

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

然后在客户端代码（可能在Backbone.view.render）上初始化库：

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