Как сделать, чтобы style.display работало во всех браузерах?

Веб-мастеринг

, ,

22.02.17

✎

12:51

Сделал вот такой код:
</head>
    <body>
        <script>

            function mouseover(e){
                //alert(e.children.statimage.style.display);
                //alert(e.name);
                if(e.name=="noload")
                {
                    e.children.gifimage.src="01-gif-250.gif";
                    //alert("asfdsf");
                }
                e.children.statimage.style.display ="none";
                e.children.gifimage.style.display ="block";
                e.name="load";
            }
            function mouseout(e){
                e.children.gifimage.style.display ="none";
                e.children.statimage.style.display ="block";
                //e.src = "01-gif_stop-300x300.jpg";
            }
        </script>
        sfdsfdsfdsfdsfdsfdsfs
        dsfdsf
        <br>
        <div onmouseover="mouseover(this)" onmouseout="mouseout(this)" name="noload">
            <img src="01-gif_stop-300x300.jpg" name="statimage" width=300 height=300>
            <img src="" name="gifimage" style="display:none" width=300 height=300>
        </div>
        <br>
        dsfdsfdsf
        dsfdsf
        <br>

    </body>
</html>

но он работает только в IE, подскжате, плз, как сделать, чтобы он работал в остальных браузерах?

1 Юрий Лазаренко

22.02.17

✎

13:05

Так оно работает, значение display меняется.

2 megabax

22.02.17

✎

13:09

(1) Гифка не отображается. А в ИЕ нормально.

3 megabax

22.02.17

✎

13:10

грубо говоря, при наводе мышкой картинка исчезает и становиться пустое поле

4 Юрий Лазаренко

22.02.17

✎

13:18

(3) У меня и в ИЕ пустое

5 megabax

22.02.17

✎

13:25

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

6 Юрий Лазаренко

22.02.17

✎

13:46

(5) А таких гифок на странице будет несколько? Или только одна?

7 megabax

22.02.17

✎

14:17

(6) Несколько, конечно. Если бы была одна, не надо было бы весь этот сыр бор городить.....

8 Asmody

22.02.17

✎

14:26

:hover чем не устраивает?

9 Юрий Лазаренко

22.02.17

✎

14:31

(8) Они хотят минимизировать время загрузки страницы. Поэтому по дефолту грузятся пустые картинки (вернее, одна картинка-шаблон), при наведении на нее мышки она должна заменяться на картинку "Идет загрузка", а как только загрузится, вместо этой надписи должна появиться загруженная картинка. Так что hover тут не катит.

10 Asmody

22.02.17

✎

14:36

(9) А я вижу, что он хочет при наведении мышки чего-то там менять.

11 Юрий Лазаренко

22.02.17

✎

14:41

(10) Я тоже вижу именно это. Но вангую, что хочется им все-таки того, что в (9).

12 Юрий Лазаренко

22.02.17

✎

14:41

То есть, навел мышь на картинку - она начала грузиться. А до того момента там заглушка висит.

13 Вафель

22.02.17

✎

14:42

а может src просто менять?

14 Юрий Лазаренко

22.02.17

✎

14:44

(13) Ну там надо чтобы сначала src поменялся на адрес картинки "Грузится", а по окончании загрузки на загруженную картинку.

15 Вафель

22.02.17

✎

14:52

(14) у картинки есть событие onload

16 Вафель

22.02.17

✎

14:52

а хотя нет, не так

17 trdm

22.02.17

✎

16:12

Вопрос другого плана: как реализована загрузка по мере видимости? Т.е. скролишь страницу, до конца, в конце срабатывает загрузка остатка хвоста.
Как это делается? На какой сигнал/обработчик расчитан механизм?

18 Asmody

22.02.17

✎

16:48

(17) onscroll
https://learn.javascript.ru/task/load-visible-img

19 trdm

22.02.17

✎

18:00

О, мерси.
Такого рода магия для меня загадка :)

20 Юрий Лазаренко

22.02.17

✎

19:17

(16) Аяксом можно, там есть onload