0

I created set of 80 images in PHP with for statement. However, the images take too long to load. I tried to implement paging for my gallery using lazy loading. I used jQuery's simplePager and lazyLoad but it didn't work. Is there another way of doing this?

Dominic Rodger
  • 90,548
  • 30
  • 192
  • 207
mtrebizan
  • 1
  • 3
  • 3
    What didn't work about simplePager and lazyLoad? – Dominic Rodger Feb 16 '12 at 10:34
  • 1
    How about something like the Dynamic Progressive Loading? http://stackoverflow.com/questions/5020351/how-to-load-the-web-page-content-based-on-user-scrolling/5020406#5020406 – Dutchie432 Feb 16 '12 at 10:36
  • You might find this interesting: [How to load images dynamically (or lazily) when users scrolls it into view](http://stackoverflow.com/q/5117421/87015) – Salman A Feb 16 '12 at 10:41
  • well, actually lazyLoad doesn't work. i make a select statement and use for statement to print every image. i put every image inside an anchor (to open it in a fancybox). could this be a problem? – mtrebizan Feb 16 '12 at 12:09

2 Answers2

0

one of the silly mistakes that you might be doing is that you are loading the entire image, what i do for my image gallery is that i have all the images stored in the database, and from that i dynamically produce a thumbnail for each image (thus smaller size) - and then cache it in the server to save processing time in the future, then when the user wants to see an image they click on it, and thats when i send the full image. This way i dont have to send more images then i want.

since you are using php lookup the gd library, or imagick, you can use either to do these, search the web to see which one is more suited for you..

hope this helps!

mur
  • 775
  • 1
  • 9
  • 24
0

Add the image tag somewere in the DOM that it doesn't show to the user, like using css:

img.loader {
    position: absolute;
    left: -10px;
    width: 1px;
    height: 1px;
}

Then create a javascript to add one image after other in the tag. Add an listener in onLoad event, you can use jQuery to do it.

var myImages = []; // Array contains your list of imagens to be loaded
function loadImage(i) {
    if myImages.lenght <= i return;
    img = $("<img>").attr({"src":myImages[i], "class":"loader"});
    img.load(arguments.callee(i++);
    $(document.body).append(img);   
}
if myImages.lenght > 0 loadImage(0);
Gabriel Gartz
  • 2,602
  • 20
  • 24
  • could this function be added to a button click and modified, to each time load 10 images? sorry for lame question ('cause i'm only designer trying to learn jquery) and thanks for help! – mtrebizan Feb 16 '12 at 12:55
  • Yes, just add the function loadImage(0) to onClick from your target link. something like `link` – Gabriel Gartz Feb 16 '12 at 19:10