1

画像が読み込まれるときに、テンプレートを介してすべての画像を読み込んでいます

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

これを行うことで（特にページに多くの画像をロードしている場合）、特にモバイルWebで非効率性が明らかになることに気付きました。

画像が表示されているとき（スクロール中）にのみ画像をロードするにはどうすればよいですか。サムネイル画像をロードして、画像のあるビューが表示されたときに実際の画像をロードするだけです。

ここでのアドバイスは大歓迎です

4

1 に答える 1

1

これを実現するためのライブラリが多数あります。私は個人的に jQuery 用のLazy Load Plugin ( demo ) を使用しました。<img src>テンプレートでプロパティを設定する代わりにdata-original、画像の URL に呼び出されるプロパティを設定する必要があります。

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

クライアント側のコード (おそらくBackbone.view.render) では、ライブラリを初期化します。

$("img[data-original]").lazyload();
于 2013-01-13T14:20:55.150 に答える