Question

在页面加载时，我的图像滑块需要一两秒才能加载，并且其下方的阴影图像会立即显示（与滑块图像相比，文件大小非常小）。你可以在这里看到它：homepage

我想在滑块图像完成加载后才加载着色图像。一旦第一个滑块图像完成加载，就可以更好地应用漂亮的优雅渐变效果。

我似乎无法弄清楚如何在jquery中写这个。有帮助吗？谢谢！

Answer 1

您可以使用图片onload事件。

使用jQuery看起来像

$('#image_id').load(function() {
     $('#div_id').fadeIn('fast');
});

如果您动态插入图像，可以将其放入创建者对象中：

$('<img>', {
    src:   '/myimages/foo.jpg',
    id:    'bar',
    load:  function() {
        $('#div_id').fadeIn('fast');
    }
}).appendTo(#somewhere);

参考：.load()
示例：http://www.jsfiddle.net/4yUqL/20/

Answer 2

您可以对图像执行上传。

使用jQuery将onload绑定到滑块的图像上并默认隐藏阴影。

$('#img').bind("load", function() {
    $('#theshadow').show();
});

当然，您需要一种方法来使用滑块（具有多个图像和其他功能）。但是图像上的加载事件应该是你想要的。

请参阅this，它是相关的

使用jquery加载图像后加载div

2 个答案: