Question

是否有任何jquery库或插件能够在后台加载外部图像并显示预览加载gif？

它还应支持滚动条，以查看比当前分辨率大得多的图像。

Answer 1

之前我使用过jQuery Cycle Plugin。它支持预览加载图片并预加载图片。它有许多不错的功能。我不确定你是否可以控制高度/ witdh，但我想如果你在周围的div上放一个css溢出属性。

例如，使用您可以找到的基本演示的一些小修改 http://jquery.malsup.com/cycle/basic.html

在这种情况下，它只是我改变的CSS样式： - ）

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Cycle Plugin - Basic Demo</title>
    <style type="text/css">
        .slideshow { height: 160px; width: 160px; margin: auto; overflow: auto }
        .slideshow img { }
    </style>
    <!-- include jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <!-- include Cycle plugin -->
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            });
        });
    </script>
</head>
<body>
    <div class="slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
    </div>
</body>
</html>

在主页上查看更多信息： http://jquery.malsup.com/cycle/

jquery画廊与ajax加载背景图像？

1 个答案: