Question

我已经构建了一个具有预加载功能的图库查看器。

预加载功能如下：

$.preloadFullImages = function() {

    // Create array of images
    var set = [];
    $('.slide-item img').each(function() {
        var img = $(this).data('src');
        var id = $(this).parent().attr('id');
        $(this).remove();
        set.push([img,id]); 
    });

    // Set current image
    var current = 0;

    var iterate = function() {
        var current_src = set[current][0];         
        var current_id = set[current][1];
        var temp = '<img src="'+current_src+'" />';       
        var target = '#'+current_id;
        var targetImg = '#'+current_id+' img';

        // Load 'temp' image
        $(temp).bind('load', function() {
            // Show image
            $(target).append(temp);
            $(targetImg).show();
            $(this).remove();
        });

        if ( ++current < set.length ) iterate();
    };
    iterate();
};

在页面加载时，图像按顺序加载。

问题是在加载所有图像之前，图像之间的动画（上一个和下一个箭头）发育不良并且无法正常工作。我希望图库查看器在幻灯片（图像）之间平滑过渡，即使并非所有图像都已加载。

您可以在此处看到现场演示：http://www.davidclapp.net/portfolio

这个问题在iPhone（safari）上尤为明显。

即使图像仍在加载，有没有办法确保动画流畅？

编辑：我正在使用此插件进行CSS3过渡 - http://ricostacruz.com/jquery.transit/

Answer 1

$.preloadFullImages = function(callback) {

...

    if ( ++current < set.length ) iterate();
    else if(callback) callback(); //check if callback exists, then call it.
};
iterate();

};

这两行是重要的部分。

$ .preloadFullImages = function（回调）{

if（++ current＆lt; set.length）iterate（）; 否则 回调（）;

创建一个函数来调用动画的开头，将其传递给＆＃34; preloadFullImages＆＃34;

加载阻止jQuery动画

1 个答案: