Question

on my live website that I created

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

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

3）用户可以通过按两个按钮来触发执行prev（）和next（），这两个按钮相对于包含图像库的div绝对定位。按下任一按钮，对应于调用next（）或prev（）时，立即执行任一功能，然后下一次执行next（）的定时器将从4500 ms重新启动。

一切都很好，但是当我第一次使用网络浏览器打开网站时，图像会因更改而滞后。图像全部循环后，它们不再滞后（这是因为它们已经在浏览器中缓存），但是第一次在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>

Answer 1

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

您的网站上已加载了很多资源（图片，声音）。
你所拥有的背景音乐大小约为4.5 MB，这似乎是主要原因
这还取决于您的托管平台和速度

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

当图像发生变化时，为什么我的图片库会滞后？

1 个答案: