jquery.tools.js图片滚动与jquery.lazyload.js图片延时加载

页面中使用了jquery.tools.js下的scrollable方法来实现图片滚动，之后加入了jquery.lazyload.js来实现图片延时加载，scrollable块的图片应用不到延时加载，跪求高手解答！注：没有应用scrollable的图片延时加载是成功的。

解决方案 »

  1.   

    Style: <style type="text/css"> .scrollable {  
    width: 800px;
    height: 400px;
    position:relative;
    overflow:auto;
    border:1px solid #000;
    }

    .items {
    position:absolute;
    height:20000em;
    margin: 0px;
    } .items div{
    width:780px;
    height:200px;
    margin-right:20px;
    margin-left:20px; }

    img{
    width:240px;
    height:180px;
    border:1px solid #ccc;
    padding: 5px 5px;
    }
    #actions {
    width:700px;
    margin:30px 0 10px 0;
    } #actions a {
    font-size:11px;
    cursor:pointer;
    color:#666;
    } #actions a:hover {
    text-decoration:underline;
    color:#000;
    } .disabled {
    visibility:hidden;
    }
    </style>js部分:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.tools.js"></script>
    <script type="text/javascript" src="jquery.lazyload.js"></script> <script type="text/javascript">
    $(document).ready(function() {
    $(".scrollable").scrollable({
    vertical: true,
    mousewheel: true,
    speed: 500
    }); $("img").lazyload({ 
        event : "sporty",
                   effect : "fadeIn",
                   container:$(".scrollable")
                }); 
    });
    </script>HTML部分
    <body> <div id="actions">
    <a class="prev">上一个</a>
    <a class="next">下一个</a>
    </div>
    <div class="scrollable"> <div class="items">
    <!-- g1 -->
    <div>
    <img src="img/grey.gif" original="img/1.jpg"/>
    <img src="img/grey.gif" original="img/2.jpg"/>
    <img src="img/grey.gif" original="img/3.jpg"/>
    </div>

    <!-- g2 -->
    <div>
    <img src="img/grey.gif" original="img/4.jpg"/>
    <img src="img/grey.gif" original="img/5.jpg"/>
    <img src="img/grey.gif" original="img/6.jpg"/>
    </div>

    <!-- g3 -->
    <div>
    <img src="img/grey.gif" original="img/7.jpg"/>
    <img src="img/grey.gif" original="img/8.jpg"/>
    <img src="img/grey.gif" original="img/9.jpg"/>
    </div>

    <!-- g4 -->
    <div>
    <img src="img/grey.gif" original="img/10.jpg"/>
    <img src="img/grey.gif" original="img/11.jpg"/>
    <img src="img/grey.gif" original="img/12.jpg"/>
    </div> </div>

    </div></body>
      

  2.   

    <script type="text/javascript">
            $(document).ready(function() {   
                    $("img").lazyload({     
                        event : "sporty",
                              effect : "fadeIn",
                              container:$(".scrollable")
                       }); 
                    $(".scrollable").scrollable({
                        vertical: true,                
                        mousewheel: true,
                        speed: 500
                    });                    
            });
        </script>颠倒一下位置试试~·貌似是延迟加载图片 ，scrollable这个滚动效果就失效了~·<img src="img/grey.gif" original="img/1.jpg" width="" height="" />
    <img src="img/grey.gif" original="img/2.jpg" width="" height=""/>
    <img src="img/grey.gif" original="img/3.jpg" width="" height=""/>然后把这些图片定义上宽和高~·
      

  3.   

    $("img").lazyload({  
      event : "sporty",
      effect : "fadeIn",
      container:$(".scrollable")
      });  
    container容器换个元素看看？$(".items")
      

  4.   

    问题没有问清楚 导致大家误解了！不好意思，回复3楼  容器不能换为items，否则IE一次就把所有图都下载下来了。       在scrollable块上面用鼠标滚轮，图片还是可以正常的延时加载。
           问题是，点击【prev上一个，next下一个】的时候，图片不执行加载  只有默认显示的几张图可以显示出来!   
      

  5.   

    Mark  一下
    期待解决，期待散分！
      

  6.   

    自己解决了               $(".prev,.next").click(function(){
                    $(".scrollable img").lazyload({ 
                     effect : "fadeIn"
                    }); 
                })