我试图在加载页面时将图像滑入页面,我的脚本工作正常,但是当图像尚未缓存时,它会先加载图像,然后执行脚本。我已尝试预加载图像,但仍然出现问题。
这是一个测试链接:http://luvly.co.nz/space/akatarawa-road.html
这是我一直在处理的脚本:
预加载
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['images/aka/aka1.2.jpg',
'images/aka/aka2.jpg',
'images/aka/aka3.jpg',
'images/aka/aka4.jpg',
'images/aka/aka5.jpg',
'images/aka/aka6.jpg',
'images/aka/aka7.jpg',
'images/aka/aka8.jpg',
'images/aka/aka9.jpg',
'images/aka/aka10.jpg']).preload();
slider :
$(function() {
$("#1-slide").one('load', function () {
$(this).show("slide", { direction: "right" }, 1000);
}).each(function() {
if(this.complete) $(this).load();
});
});
此外,我知道我不应该使用数字来启动 ID,但目前它仅用于测试目的。
最佳答案
您只需确保在运行脚本之前加载图像,因此请尝试如下操作:
<body>
<img src=image1.jpg" style="display:none" />
....
Your script calling
此解决方案取决于首先调用您希望在幻灯片中显示的图像,因此在运行脚本之前将其下载到缓存中。所以它会首先被缓存
关于jquery - 加载页面时将图像滑入页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15282965/