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

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>的属性设置为图像的网址，而不是在模板中设置data-original属性：

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

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

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