1

我想让一些图像在页面加载时淡入网页，所以从 opacity:0 开始，然后使用图像加载脚本淡入 opacity:1。

但是，要使脚本正常工作，图像必须最初是不可见的。因此，如果我使用 CSS 将不透明度设置为零，如果用户没有 javaScript，他们将看不到任何图像。

为了解决这个问题，我尝试像这样通过 jQuery 应用零不透明度......

 $(".images").css('opacity', 0);

...但是我仍然会在 100% 不透明度下看到图像闪烁，然后 jQuery 启动，隐藏它们，只是让它们通过图像加载脚本再次淡入。

那么在加载之前隐藏图像最安全的方法是什么，这样即使用户禁用了javaScript，他们仍然可以看到图像，他们只是不会得到花哨的图像加载效果？

提前致谢

4

2 回答 2

1

如果您使用的是“图像加载脚本”，也就是通过 js 加载它，您可以执行以下操作：

var img = $(document.createElement('img'));
img.on('load.fade-image', function () {
  // Note: set opacity of the image before adding it to the DOM, this way it will be rendered with 0 opecity
  img.css('opacity', 0);
  img.appendTo('body');
});
img.attr('src', 'http://some-url');
于 2013-10-12T23:39:28.180 回答
1

这是我最后一次尝试，因为你到处都是：

<noscript>
<style type="text/css">
.images {
opacity:1;
}
</style>
</noscript>

在样式表中：

.images {
opacity: 0;
}

在 jquery 中：

$('.images').fadeIn();

如果有人没有 javascript，那么它会点击 noscript 标记并将图像的不透明度改回 1。老实说，虽然这些天谁没有 javascript？

于 2013-10-12T22:50:14.077 回答