图像库显示图像太慢

Question

我有一个 div（gallery div），它在按钮单击时为 FadedIn，在该 div 内的关闭按钮上为 FadedOut。我希望有 2 个按钮用于下一张图片和上一张图片，画廊有大约 50 张图片，但它们似乎显示在 chrome 和 FireFox 和 IE 上慢一点，这是我的代码。Div 名称是“FadeIn”，关闭按钮名称是“close”，显示照片的 div 内的图像面板是“Dimage”。它是工作，但每次我点击下一个或上一个时，似乎我都会向服务器询问应该显示的图像的位置。我正在考虑在页面加载时加载所有图像的脚本，然后在下一个/上一个上只是获取这些加载的图像src 但是如何实现它，我也认为我可以只使用 HTML 和 CSS3 来获得更好的解决方案 指向网络应用程序的链接 >> 画廊的Галерия hotelmontecristobg.com

Javascript：

   $(document).ready(function () {

            $('body').on('click', '#close', function () {
                $('#FadeIn').fadeOut(1000);
            });

            var indix = 1;

            var DefaultImages = new Array('MainImages/1.jpg', 'MainImages/2.jpg', 'MainImages/3.jpg',
                'MainImages/4.jpg', 'MainImages/5.jpg', 'MainImages/6.jpg',
                'MainImages/7.jpg', 'MainImages/8.jpg', 'MainImages/9.jpg',
                 'MainImages/12.jpg',
                'MainImages/13.jpg', 'MainImages/14.jpg', 'MainImages/15.jpg',
                'MainImages/16.jpg', 'MainImages/18.jpg',
                'MainImages/19.jpg', 'MainImages/20.jpg', 'MainImages/21.jpg',
                'MainImages/22.jpg', 'MainImages/23.jpg', 'MainImages/24.jpg',
                'MainImages/a1.jpg', 'MainImages/a2.jpg', 'MainImages/a3.jpg',
                'MainImages/a4.jpg', 'MainImages/a5.jpg', 'MainImages/a6.jpg',
                'MainImages/a7.jpg', 'MainImages/a8.jpg', 'MainImages/a9.jpg',
                'MainImages/b1.jpg', 'MainImages/b2.jpg', 'MainImages/b3.jpg',
                'MainImages/b4.jpg', 'MainImages/b5.jpg', 'MainImages/b6.jpg',
                'MainImages/b7.jpg',  'MainImages/b9.jpg',
                'MainImages/b10.jpg', 'MainImages/b11.jpg'
                );

            $('body').on('click', '#Hbutton1', function (event) {
                $('#FadeIn').fadeIn(1000);
                $('#Dimage').attr("src", DefaultImages[1]);
            });
            $('body').on('click', '#rightBut', function (event) {

                if (indix == DefaultImages.length - 1) {
                    indix = 0;
                }
                else {
                    indix++;
                }
                $('#Dimage').fadeOut(2000, function () {
                    $('#Dimage').attr("src", DefaultImages[indix]);
                });
                $('#Dimage').fadeIn(2000);


            });
            $('body').on('click', '#leftBut', function (event) {
                if (indix == 0) {
                    indix = DefaultImages.length - 1;
                }
                else {
                    indix--;
                }
                $('#Dimage').attr("src", DefaultImages[indix]);

            });

        });

Answer 1

您的脚本现在的方式是在页面加载时加载所有图像，javascript 是客户端，因此它不会进入您的服务器。

你的图片很大，我会优化它们，这应该会有所帮助，我也会减少幻灯片放映。大多数用户不会通过 50 张图片找到您想要展示的独特示例，然后将其减少大约 20-25 张图片，这两者的结合应该有助于加快加载时间。

您可以使用this 之类的网站来优化您的 jpeg。

编辑： 您是对的，仔细查看后，您将在每次单击时重置 src 属性。我会将所有图像加载到 HTML 元素中，并使用 CSS 和 Javascript/JQuery 创建幻灯片。

下面是一个例子：

https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

无论您采用何种解决方案，优化图像始终是明智之举。