jQuery: lazy load with carouFredSel plugin

Question

I'm trying to implement a lazy load for images that are inside a carousel created with the carouFredSel jQuery plugin.

Do you have any advice or have you already achieved something similar? It seems that it can't do it by default.

Answer 1

@Stefano- what have you tried so far? (Show some code if you can). It will help us see exactly whats going on.

As a rule of thumb with lazy loading, make sure you put a place holder image as the src in your html like: src="img/grey.gif". This image can be anything - but most folks use a small 1px box b/c its light for the server to transfer. It's also a good idea for binding to put a specific class in your html's <img> src, like: class="lazy".

So an example of your html src:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

Then in your jquery function put-

$("img.lazy").lazyload();  //this is why the binding of a class is helpful

Some good references to read are here and here. Post some code if you have a specific question regarding lazyload() with Fred.

Answer 2

Try this (Horizontal scrolling)

http://www.appelsiini.net/projects/lazyload/enabled_wide_container.html

 $("img").lazyload({
     container: $("#container")
 });

-- Lee