图像库显示图像太慢

I have a div( gallery div) which is FadedIn on button click and FadedOut on close button inside that div.And i want to have 2 buttons for next image and previous image the gallery has around 50 images but they seem to display slowly on chrome and on FireFox and IE even too slowly here is my code.The Div name is "FadeIn" the closing button name is "close" and the image panel inside that div where the photos are displayed is "Dimage".It is working but everytime i click next or previous it seems that i ask the server for the location of the image that should be displayed.I'm thinking of script that on pageload loads all the images and then on next/previous just gets these loaded images src but how to implement that , also i think for that i can have better solution using only HTML and CSS3 a link to the web app >> Галерия for the gallery hotelmontecristobg.com

我有一个div(图库div)按钮点击FadedIn和div内的关闭按钮FadedOut.And我想有2个按钮用于下一个图像和上一个图像画廊有大约50个图像但它们似乎在chrome上显示缓慢在FireFox和IE上甚至太慢了这里是我的代码.Div名称是“FadeIn”,关闭按钮名称是“关闭”,显示照片的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]);

            });

        });

1 个解决方案

#1

The way your script is now all the images should be loaded when the page is loaded, javascript is client side so it won't be going to your server.

现在你的脚本的方式应该在加载页面时加载所有图像,javascript是客户端,所以它不会进入你的服务器。

Your images are massive, I would optimize them and that should help, I would also cut that slide show down. Most users are not going to go through 50 images find unique examples of what you want to show and cut it down around 20-25 images the combination of those two things should help speed up your load times.

你的图像是巨大的,我会优化它们,这应该有所帮助,我也会削减幻灯片放映。大多数用户不会查看50张图片,找到您想要显示的独特示例,并将其缩小到20-25张图片,这两件事的组合应该有助于加快您的加载时间。

You can use a site like this to optimize your jpegs.

您可以使用这样的网站来优化您的jpeg。

EDIT: You are correct, after looking at it closer you are resetting the src attribute on each click. I would load all the images into HTML elements and create a slideshow using CSS and Javascript/JQuery.

编辑:你是对的,在仔细观察之后,你会在每次点击时重置src属性。我会将所有图像加载到HTML元素中,并使用CSS和Javascript / JQuery创建幻灯片。

Here is an example of how to do so:

以下是如何执行此操作的示例:

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

No matter what solution you go with, it is always wise to optimize you images though.

无论你采用什么解决方案,尽管优化你的图像总是明智的。

#1