我目前正在为 ipad 开发一个 html 页面，其中包含用于各种内容的 css3 转换 slider 。
我遇到的问题是，下一页上尚未渲染的图像将在将它们滑动到内容区域时渲染(尽管它们是预加载的)。
有没有办法让浏览器渲染它们，而不是在初始页面请求时显示它们，以防止图像上出现断断续续的滑动效果？
/编辑:
我使用的 slider :slider
结构如下:
<body>
<!-- wrapper -->
<div>
<!-- head -->
<div class="head"></div>
<!-- content area -->
<div class="content">
<div class="container">
<div class="pagination"></div>
<div class="slide-wrapper">
<div class="slide">
<!-- content with images here -->
</div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
</div>
<!-- foot -->
<div class="foot"></div>
</div>
</body>
图像预加载:
function preload() {
$('img').each(function(){
$('<img/>')[0].src = $(this).attr('src');
});
}
最佳答案
这将强制浏览器预加载所有图像
$('img').each(function(){
var image = new Image();
image.src = $(this).attr('src')
});
关于Javascript 预渲染图像未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13970145/