强制图像加载事件

查看我对此主题的回复：jQuery - Complete loading animation on each individual image?

正如jQuery文档页面中提到的load事件，它存在一些问题。在IE上，它并不总是第一次触发，而在webkit浏览器上，如果从缓存中读取它并不总是触发它。

您正在使用load()事件将图片原始高度保存到数据属性，但由于上述情况并未始终设置，因此调整大小不起作用。

解决方案是将以下一小段代码放入您的ready函数中，该函数清除并重置所有图像上的src属性（如果您愿意，可将其更改为某些图像）以强制触发加载事件。

$('img').each(function(){
    var src = $(this).attr('src');
    $(this).attr('src','#');
    $(this).attr('src',src);
});

以下是您的固定jsfiddle演示：http://jsfiddle.net/fwUMx/86/

自动循环浏览图像

如果想要自动循环显示图像具有相同的效果，您只需要编写一些额外的函数并在动画完整回调中调用它们。这是一个有效的演示：http://jsfiddle.net/fwUMx/99/

var images = null;
var animation_speed = 500;
var wait = 1500;

function ZoomIn(element){
    element.animate({
        height: element.data('height') * 1.5
    }, animation_speed, function(){
        // Zoom in animation ended, schedule next image
        setTimeout(function(){
            ZoomOut(element);
        }, wait);
        setTimeout(function(){
            var next = element.next();

            // Comment out the next line if you don't want the animation to restart after last image.
            if(element.index() == images.length - 1) next = images.eq(0);

            ZoomIn(next);
        }, wait);
    });
}

function ZoomOut(element){
    element.animate({
        height: element.data('height') * 1
    }, animation_speed);
}

function StartAnimation(){
    // Make sure images object is set
    if(!images) return;

    ZoomIn(images.eq(0));
}

$(function(){
    images = $('img');

    var cnt = images.length;
    var loaded = 0;

    images.load(function() {
        $(this).data('height', this.height);
        loaded++;

        // Start the animation after all images have loaded
        if(loaded == cnt) StartAnimation();
    });

    // Force image load events
    images.each(function(){
        var src = $(this).attr('src');
        $(this).attr('src','#');
        $(this).attr('src',src);
    });
});

jQuery鼠标悬停浏览器兼容性问题

1 个答案:

强制图像加载事件

自动循环浏览图像