Question

after searching google i got a code which works but this code download all the images at a time

code is

<script type="text/javascript">
  $(document).ready(function () {
      $("table[id*=dgImages] img").each(function () {
          $(this).attr("src", $(this).attr("original"));
          $(this).removeAttr("original");
      });
  });
</script>

<asp:DataList ID="dgImages" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" RepeatLayout="Table">
      <ItemTemplate>
      <img src="images/ajax-loader.gif" original='<%# Eval("photos")%>' />
    </ItemTemplate>
</asp:DataList>

whatever the images are there in datalist the code download all at a time. so i need to customize it that only visible images should download and when user scroll down then next visible images should download.
so please guide me what to modify in my client script.

thanks

Answer 1

This will ensure that only visible images are downloaded:

$(document).ready(function () {
  $("table[id*=dgImages] img").each(function () {
    if($(this).offset().top > $(window).scrollTop() && $(this).offset().top < $(window).scrollTop() + $(window).height()) {

      // callback on load complete          
      this.onload = function() { 
        alert('loaded'); 
        $(this).fadeIn('slow');
      }

      $(this).attr("src", $(this).attr("original"));
      $(this).removeAttr("original");
    }
  });
});