如何滾動

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%>"} 

我知道做這個（ESP如果我加載很多圖片在頁面上），它會導致移動網絡上效率低下。

我該如何加載圖像只有當它們在視圖中（滾動），也許只是加載縮略圖圖像並加載實際圖像時，圖像的視圖來看。

這裏的任何建議表示讚賞

Answer 1

有一些庫來實現這一點。我親自使用了Lazy Load Plugin用於jQuery（demo）。相反，在模板中設置<img src>財產的，應當稱爲data-original屬性設置爲圖像的URL：

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

而且在客戶端代碼（也許在Backbone.view.render）在初始化庫：

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