Question

我想在页面加载时在网页上淡入一些图像，所以从不透明度开始：0然后淡入不透明度：1使用图像加载脚本。

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

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

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

...但是我仍然以100％不透明度获得闪烁的图像，然后jQuery启动，隐藏它们，只为它们再次使用图像加载脚本淡入。

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

提前致谢

Answer 1

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

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

样式表中的

：

.images {
opacity: 0;
}

在jquery中：

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

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

Answer 2

如果你使用的是“图像加载脚本”，也就是通过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');

页面加载时零不透明度，但使用渐进增强方法？

2 个答案: