Question

我有一个页面，我通过Ajax调用获取分类广告的详细图像，然后预加载图像，将它们添加到div持有者，然后显示（）div。出于某种原因，动画真的很不稳定？有什么想法吗？

以下是代码：

$(".showPixFeature.hidden").live('click', function () { 
    var adID = this.id.split('_');
    $("#" + adID[0] + '_' + adID[1]);
    $.ajax({
    type: "POST",
    url: "../classifieds/classAdPics.php",
    data: "ID="+ this.id,
    success: function(r) {
        var images = r.split('~');
        var thumbs = '';
        var thumbImages = '';

        $.loadImages('../images/35.gif', function() {$('<img />').attr({
            src:'../images/35.gif',
            id:'loader'
        })
        .appendTo("#" + adID[0] + '_' + adID[1]);

        $('#loader').remove();
    });

    var i=0;
    if(((images.length) - 1) > 1){
        for (i=1;i<=(images.length) - 1;i++)
            {
            thumbs = thumbs + '<img src="../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg" id="' + adID[1] + '_' + images[i] + '" class="thumbNails">';
                thumbImages = thumbImages + '"../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg", ';
                $.loadImages('../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg', function() {

                });
            }
        }
        thumbs = thumbs + '<div><img src="../images/listings/' + adID[1] + '_1_.jpg" id="' + adID[1] + '_Preview" class="thumbNails"></div>';
        $.loadImages('../images/listings/' + adID[1] + '_1_.jpg', function() {
    });


    $("#" + adID[0] + '_' + adID[1]).html(thumbs).hide();

    $("#" + adID[0] + '_' + adID[1]).slideDown('slow');
    }
});
$(this).attr("src", "../images/close_pix.png");
$(this).removeClass('hidden').addClass('shown');
});

Ajax调用会产生类似“~1~2~3”的内容，具体取决于它为该广告找到的图像数量。然后我解析并将AdID附加到它，并预加载图像。它为所有图片预加载一个小缩略图，并预览大图像。

动画的作用是什么，特别是对于单个图像的动画，它首先执行慢动画，然后快速关闭动画。我希望它以一致的速度顺利滑动。

您可以在http://www.randykrohn.com/classifieds/allAds.php?searchKey=AllAds

看到该页面

谢谢！

Answer 1

在我看来，您没有正确使用loadImages插件。您假设在调用“loadImages”之后，将加载图像。这不一定是这种情况，这就是为什么当我第一次看到你的网站并点击“显示所有图片”按钮时，它非常生涩。当我接下来的时候它很顺利。而且，当我第一次点击缩略图时，当前详细图像到下一个的转换真的很糟糕，而后续点击很好。

只有在调用“回调”例程时才会完全加载图像。所以，如果我有一个函数processImages()，它可以像设置动画一样，并以类似于编写代码的方式调用它：

$.loadImages(['image1.jpg', 'image2.jpg'], function(){});
processImages();

这将是第一次生涩，因为它可能在图像加载之前被调用。这样称呼它：

$.loadImages(['image1.jpg', 'image2.jpg'], function(){processImages();});

每次都会很漂亮，因为只有在加载图像时才会调用“processImages（）”。

Answer 2

我不确定您的意见是什么意思，但请尝试重写开头的代码：

    if(((images.length) - 1) > 1){

像这样（我在视觉上检查了它，但我可能错过了一些东西）：

    if ((images.length > 2) {
        for (i = 1; i < images.length; i++) {
            thumbs      += '<img src="../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg" id="' + adID[1] + '_' + images[i] + '" class="thumbNails">';
            thumbImages += thumbImages + '"../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg", ';
            toBeLoaded[i-1] = '../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg';
        }
    }
    thumbs += '<div><img src="../images/listings/' + adID[1] + '_1_.jpg" id="' + adID[1] + '_Preview" class="thumbNails"></div>';
    toBeLoaded[i-1] = '../images/listings/' + adID[1] + '_1_.jpg';
    $.loadImages(toBeLoaded, function(){
        $("#" + adID[0] + '_' + adID[1]).html(thumbs).hide();
        $("#" + adID[0] + '_' + adID[1]).slideDown('slow');
    });

即。在一次调用loadImages中加载图像，并在回调函数中进行隐藏和滑动。

Jquery预加载图像然后显示div - 动画波涛汹涌

2 个答案: