Question

我正在尝试在加载页面时将图像滑入页面，我的脚本工作正常但是当图像没有被锁定时，它首先加载图像，然后执行脚本。我试图预先加载图像，但仍然是老生常谈。

以下是测试链接：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();

滑块：

$(function() {
  $("#1-slide").one('load', function () {
    $(this).show("slide", { direction: "right" }, 1000);
  }).each(function() {
    if(this.complete) $(this).load();
  });
});

此外，我知道我不应该使用数字来启动ID，但目前仅用于测试目的。

Answer 1

您只需确保在运行脚本之前加载图像，因此请尝试以下操作：

<body>
<img src=image1.jpg" style="display:none" />
....
Your script calling

此解决方案取决于您首先要调用幻灯片中的图像，因此在运行脚本之前将其下载到缓存中。所以它将首先缓存

加载页面时将图像滑入页面

1 个答案: