[jQuery] Re: How to load picture after picture

[Jonathan Sharp]

On 4/11/07, wyo <[EMAIL PROTECTED]> wrote:

On Apr 10, 11:58 pm, "Jonathan Sharp" <[EMAIL PROTECTED]> wrote:
> Another approach would be to print out the images like:
> echo "<img align=\"center\" src=\"$f\" style=\"display: none;\"
> class=\"photo\"><br><br>";
>
Doesn't this load all the pictures right away? Since I expect soon a
few hundreds pictures I don't want to load all.

Yes, that is true, but they'll load in the order in which they appear in the
document so it will in effect be a preload for future images.


And what about if the hiding (display:none) was done afterwards with

Javascript? So a user with Javascript disabled would still see the
pictures (of course all).

You could do that too... here's another option:

echo "<img align=\"center\" src=\"$f\" class=\"photo\"><br><br>";

Then the following jQuery code:
$(function(){
  $('img.photo').each(hidePhoto);

  function showPhoto() {
     this.src = this.$src;
     $(this).show();
  }
  function hidePhoto() {
     $(this).hide();
     this.$src = this.src;
     this.src = '';
  }

   $('img.next').bind('click', function() {
       $('img.photo:visible').each(hidePhoto).next().is('img.photo
').each(showPhoto);
   });
   $('img.prev).bind('click', function() {         $('img.photo:visible'
).each(hidePhoto).prev().is('img.photo').each(showPhoto);
   });
});

Here's another slightly modified version that handles the image loading
issue as well as non-js.

-js