Слайд-шоу Javascript замедляет мой сайт - PullRequest
Новая
       28

Слайд-шоу Javascript замедляет мой сайт

0 голосов
/ 05 декабря 2011

ПРИМЕЧАНИЕ. Я только что заметил, что при наведении курсора на пункт меню он не регистрируется, пока изображение не загружено. Не уверен, почему это

Я только что добавил слайд-шоу изображений на страницу индекса моего сайта. Я наконец получил это работает и загрузил это. Теперь в слайд-шоу будут показаны 5 изображений, но время загрузки довольно значительно, и при попытке щелкнуть любое из меню возникает большая задержка.

Вот код в начале файла: 

<script type="text/javascript">
<!--
var image1=new Image()
image1.src="image1.JPG"
var image2=new Image()
image2.src="image2.JPG"
var image3=new Image()
image3.src="image3.JPG"
var image4=new Image()
image4.src="image4.JPG"
var image5=new Image()
image5.src="image5.JPG"
//-->
    </script>

И код в теле страницы: 

<script type="text/javascript">
            <!--
            //variable that will increment through the images
            var step=1
            function slideit(){
            //if browser does not support the image object, exit.
            if (!document.images)
               return
            document.slide.src="images/image"+step+".JPG"
            if (step<5)
               step++
            else
            step=1
            //call function "slideit()" every 2.5 seconds
            setTimeout("slideit()",2500)
            }
            slideit()
            //-->
            </script>

Есть идеи, почему страница сейчас такая медленная?

Заранее спасибо!

1 Ответ

0 голосов
/ 05 декабря 2011

Причин может быть несколько.

Ожидает ли слайд-шоу загрузки всех изображений до его запуска?Если это так, рассмотрите возможность размещения сценария слайд-шоу внизу HTML-страницы, если это возможно.Таким образом, весь другой контент загружается первым.

Анимировано ли слайд-шоу?Изображения медленно перемещаются по экрану каждые 2500 секунд?В этом случае код, который вы используете, может иметь слишком малое значение для его функции setTimeout ().Попробуйте поднять его или рискнуть и использовать переходы CSS3 для анимации.

...