0

在我创建的实时网站上

我遇到了一个大问题。在链接到的页面（也是该站点的主页）上，有一个执行以下功能的图片库：1）我的 html 文件结构中有一个名为 public_html/images/lightbox 的目录，其中所有图片将显示被存储。php 脚本（动态）使用 scandir 函数获取该目录的内容，然后获取该函数返回的 PHP 数组，将其内爆为 PHP 字符串，将该 PHP 字符串分配给 javascript 字符串，然后拆分该 javascript 字符串到一个 javascript 数组（它存储存储在 public_html/images/lightbox 目录中的图像的文件路径。

2）有两个javascript函数称为prev（）和next（）。next() 每 4.5 秒自动调用一次，递增一个在图像数组中移动的索引变量。无论用户与网页的交互如何，这都会在后台进行；有一个计数器使用 setTimeout 方法使 next() 每 4500 毫秒执行一次。

3）用户可以通过按下两个按钮来触发prev()和next()的执行，这两个按钮相对于包含图片库的div是绝对定位的。在按下任一按钮时，对应于调用 next() 或 prev()，任一函数都会立即执行，因此下一次执行 next() 的计时器将从 4500 毫秒重新开始。

一切正常，但是当我第一次使用网络浏览器打开该站点时，图像在更改时会滞后。图像全部循环通过后，它们不再滞后（这是因为它们已被缓存在浏览器中），但第一次在 Web 浏览器上查看时，图像 URL/图像更改时的滞后会破坏用户体验，并使网站设计不佳。

这是代码：非常感谢。

 <?php
    $path = "images/lightbox/";
    $gallery = scandir($path);
    array_shift($gallery); array_shift($gallery);
    foreach($gallery as &$image) {
        $image = $path . $image;    
    }

    $gallery_string = implode(" ", $gallery);
    ?>

    <script>
    $(function() {
        $("#prev").on("click", $.prev);
        $("#next").on("click", $.next);
    });
    </script>
    <script>
    var gallery= new Array();
    var gallery_string = "<?php echo $gallery_string; ?>";
    gallery = gallery_string.split(" ");

    var ImageCnt = 0;

    $.prev = function(event) {
        if (ImageCnt == 0)  {   ImageCnt = gallery.length - 1;  } 
        else                                {   ImageCnt -= 1;                                  }
        $("#lightbox").css("background", "url(" + gallery[ImageCnt] + ")").css("background-size","670px");
        clearTimeout(t);
        t = setTimeout($.next, 4500);
        event.stopPropagation();
    }

    $.next = function(event){
        if(ImageCnt < gallery.length-1)     {       ImageCnt++;     }
        else {      ImageCnt = 0;   }
        $("#lightbox").css("background", "url(" + gallery[ImageCnt] + ")").css("background-size","670px");
        if(event != undefined) {
            clearTimeout(t);
            event.stopPropagation();
        }
        t = setTimeout($.next, 4500);
    }

    var t = setTimeout($.next, 4500);
    </script>
4

1 回答 1

0

滞后与脚本无关，但主要是由于这些原因

  1. 您的网站上正在加载许多资源（图像、声音）。
  2. 您播放的背景音乐大小约为 4.5 MB，这似乎是主要原因
  3. 这也取决于您的托管平台和速度

我建议摆脱音乐，因为除了会导致延迟之外，在我看来，它还会影响您网站访问者的体验。也尝试使用较少的图形，尽可能使用 GIF/PNG 而不是 JPEG，但是，如果您必须使用 JPEG，请尝试压缩它们。

于 2013-05-18T02:25:25.043 回答