jquery 加载图片

Question

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.scrollLoading.js"></script>
    <script type="text/javascript">
        $(function(){            
            $("#aNext").click(function(){
                
                $(".scrollLoading").scrollLoading();
                $(".scrollLoading").attr("src","ProImg/ProImgThu/small.jpg");
                
                //$(".scrollLoading").scrollLoading();
               $(".scrollLoading").attr("data-url","ProImg/big.jpg");
               // $(".scrollLoading").scrollLoading();
            });
        });
        $(document).ready(function(){
            $(".scrollLoading").scrollLoading();
        });
    </script>
<div>
    <img class="scrollLoading" src="ProImg/ProImgThu/small.jpg" data-url="ProImg/big.jpg" />    
    <a id="aNext" href="javascript:void(0);">下一张</a>
    </div>
想实现一个图片加载时候先加载小图片，当大图片加载完毕之后，把小图片替换显示成大图片。jquery的scrollLoading()首次加载的时候可以实现，但是图片翻页就没有效果了。各位有什么好的解决办法 给小弟一个参考。

Answer 1

$(".scrollLoading").attr("src","ProImg/ProImgThu/small.jpg");
$(".scrollLoading").attr("data-url","ProImg/big.jpg");红色属性的值不要和原来的一样试试

Answer 2

点下一张后重新构造一个img，然后再绑定试试？

Answer 3

<div style="width: 500px; height: 300px; position: relative;">
            <div style="width: 500px; height: 300px;">
                <img class="imgSmall" alt="" src="ProImg/ProImgThu/20111025181807.jpg" width="500" height="300" />
            </div>
            <!--小图片的大小被定义为大图片的大小值-->
            <div style="width: 500px; height: 281px; position: absolute; top: 0;">
                <img class='imgBig' alt="" src="ProImg/20111025181807.jpg" width="500" height="300" />
            </div>
        </div>谢谢大家的支持，我找了一个方法，就是用层的绝对定位，把缩略图与原图定位在一起，缩略图在上。这个办法可以解决，把代码贴出来，大家以后如果有用得到的地方也好有个参考。

Answer 4

http://blog.csdn.net/fengyarongaa/article/details/6703614