使用 jquery 加载图像后加载 div答案

【问题标题】：Load a div once image is loaded using jquery使用 jquery 加载图像后加载 div
【发布时间】：2010-12-20 06:25:13
【问题描述】：

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

我希望仅在滑块图像完成加载后才加载阴影图像。一旦第一个滑块图像完成加载，应用优雅的淡入效果会更好。

我似乎无法弄清楚如何在 jquery 中编写它。有什么帮助吗？谢谢！

【问题讨论】：

标签： jquery image pageload

【解决方案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/

【讨论】：

@JCHASE11：我添加了一个示例链接。

【解决方案2】：

您可以对图像进行加载。

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

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

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

见this，有关系

【讨论】：