Question

我有一个div（图库div），按钮点击时为FadedIn，而div内有关闭按钮的FadedOut。我希望有2个按钮用于下一个图像和上一个图像，图库有大约50个图像，但它们似乎显示慢慢地在Chrome和FireFox和IE上甚至太慢了这里是我的代码.Div名称是“FadeIn”，关闭按钮名称是“关闭”，显示照片的div内的图像面板是“Dimage”。它是工作，但每次我点击下一个或上一个似乎我问服务器应该显示的图像的位置。我正在考虑脚本，在页面加载加载所有图像，然后在下一个/上一个只是获取这些加载的图像src，但如何实现，我认为，我可以有更好的解决方案，只使用HTML和CSS3 指向网络应用的链接＆gt;＆gt;画廊的Галерия 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/

无论您采用何种解决方案，都可以优化图像。

图像库显示图像太慢

1 个答案: