简单的间谍不缓存图像

时间:2011-12-30 00:38:06

标签: jquery caching

简单的间谍是非常有用的jquery插件/代码!但我看到这不是缓存图像并向服务器发送许多请求!谁知道什么问题?

间谍代码:

$(function () {
    $('ul.spy').simpleSpy();
});

(function ($) {

$.fn.simpleSpy = function (limit, interval) {
    limit = limit || 4;
    interval = interval || 4000;

    return this.each(function () {
        // 1. setup
            // capture a cache of all the list items
            // chomp the list down to limit li elements
        var $list = $(this),
            items = [], // uninitialised
            currentItem = limit,
            total = 0, // initialise later on
            height = $list.find('> li:first').height();

        // capture the cache
        $list.find('> li').each(function () {
            items.push('<li>' + $(this).html() + '</li>');
        });

        total = items.length;

        $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });

        $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

        // 2. effect        
        function spy() {
            // insert a new item with opacity and height of zero
            var $insert = $(items[currentItem]).css({
                height : 0,
                opacity : 0
            }).prependTo($list);
            // fade the LAST item out
            $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
                // increase the height of the NEW first item
                $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);

                // AND at the same time - decrease the height of the LAST item
                // $(this).animate({ height : 0 }, 1000, function () {
                    // finally fade the first item in (and we can remove the last)
                    $(this).remove();
                // });
            });

            currentItem++;
            if (currentItem >= total) {
                currentItem = 0;
            }

            setTimeout(spy, interval)
        }

        spy();
    });
};

})(jQuery);

原始来源:http://jqueryfordesigners.com/demo/simple-spy.html 演示Ib JsFiddle:http://jsfiddle.net/treeface/xaJ9F/ 萤火虫的图片:......

XXXXX CHRISTMAS XXXXX

1 个答案:

答案 0 :(得分:0)

只需将图像预加载添加到脚本中即可。 您可以在此处找到有关如何执行此操作的良好示例:Preloading images with jQuery