0

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

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

4

1 回答 1

1

我以前使用过 jQuery Cycle 插件。它支持预览加载图片和预加载图片。它有很多不错的功能。我不确定你是否可以控制高度/宽度，但我认为如果你在周围的 div 上放置一个 css 溢出属性。

例如，使用您可以在 http://jquery.malsup.com/cycle/basic.html上找到的 Basic Demo 的一些小修改

在这种情况下，它只是我更改的 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/

于 2012-06-24T20:36:36.033 回答