我希望我的网站上的缩略图在加载时淡入而不是加载传统方式。我正在使用jQuery来实现这一点,方法是在CSS中将每个img的不透明度设置为0,然后使用jQuery将其淡化为1:
image.bind("load", function () { $(this).fadeTo(1000, 1); });
这在桌面浏览器中运行良好,但在iPhone上的Mobile Safari或Chrome中,图像的淡化会使得加载和淡入都在同一个线程中执行并且加载会阻止动画。我怀疑这可能正是发生了什么,我只能忍受它,但我发布在这里,希望有人有一个黑客或聪明的方式围绕它。
我尝试用不透明的div覆盖每个图像,然后将其淡化为透明,但它会产生相同的结果。
中看到它的实际效果答案 0 :(得分:1)
听起来像是使用.fadeTo()
来解决帧率问题我建议使用Safari内置的CSS3过渡效果,以便在您正在寻找的时候获得平滑的淡入淡出:https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction.html