Javascript-форум - Мигание при смене кадров

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Мигание при смене кадров (https://javascript.ru/forum/jquery/46435-miganie-pri-smene-kadrov.html)

Мигание при смене кадров

Здравствуйте. Пытаюсь заменить имеющийся облёт дом, написанный на flash на аналогичный по функционалу, с использованием jquery. Сделать облёт удалось
http://ярославский27.рф/fly1.php

Но при нажатии на левую стрелку происходит мигание, тогда как при нажатии на правую такого эффекта нет. Как устранить мигание?

paveltkachev,
выкинуть строку 108 $('div.houseframe').hide();
или если нужно скрывать всё кроме текущего div

Спасибо огромное!

В IE9 кадры мигают, пока не будет сделан полный облёт вокруг дома. На втором круге всё уже без миганий. В других браузерах такой проблемы нет. Можно ли это победить?

paveltkachev,
возможно картинки неуспели подгрузится - воспроизвести мигание неудалось .

А можно сделать какой-то предзагрузчик, чтобы начинать отображение при гарантированно загруженных картинках?

paveltkachev,
прогоните циклом создание картинки с нужным src - на onload последней поставьте появление кнопок влево вправо -- неплохобы фоном поставить менее ёмкую картинку на время загрузки -- или может сжать те что есть. загрузчиков полно в инете.
и тут на форуме .

Единственный найденный мною предзагрузчик - это вот этот

function preloadImages()
{
for(var i = 0; i<arguments.length; i++)
$("<img />").attr("src", arguments[i]);
}

Но тут нет onload.

paveltkachev, можно и без jquery строки 14, 15 и 25 вам ненужны -- да и в код выше можно добавить load.

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .gallery img{
    width: 150px;
    height: 100px;
  }

  </style>
  <script>
window.onload = function () {
     var imgs = document.querySelectorAll('.gallery img');
     var arr_src = ['http://www.anypics.ru/pic/201302/1366x768/anypics.ru-59453.jpg',
     'http://www.wall-papers.ru/main.php?g2_view=core.DownloadItem&g2_itemId=38417&g2_serialNumber=3',
     'http://w7t.ru/zooms/7da1/7/6168262b44.jpg',
     'http://imgs.mi9.com/uploads/cartoon/4834/disney-cartoon-wallpaper_1366x768_88837.jpg',
     'http://biskvitka.net/uploads/posts/2011-05/thumbs/1306582219_12.jpg'],len = arr_src.length;
     for (var i = 0; i < arr_src.length; i++) {
         var img = document.createElement('img');
         img.onload = (function (a) {
             return function () {
                 imgs[a].src = this.src;
                 len--;
                 !len && alert('complete')
             }
         })(i);
         img.src = arr_src[i];
         img.complete && img.onload()
     }
 }
  </script>
</head>

<body>
<div class="gallery">
<img src="http://ozemanage.com/images/loading.gif" alt="" />
<img src="http://ozemanage.com/images/loading.gif" alt="" />
<img src="http://ozemanage.com/images/loading.gif" alt="" />
<img src="http://ozemanage.com/images/loading.gif" alt="" />
<img src="http://ozemanage.com/images/loading.gif" alt="" />
</div>
</body>
</html>

Предзагрузчик не помогает. Помогла замена jQuery на 1.11

А как сюда добавить onload?

function preloadImages()
{
for(var i = 0; i<arguments.length; i++)
$("<img />").attr("src", arguments[i]);
}

Прелоад картинок на jquery

paveltkachev,
:-?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function () {
       var arr_src = ['http://www.anypics.ru/pic/201302/1366x768/anypics.ru-59453.jpg',
           'http://www.wall-papers.ru/main.php?g2_view=core.DownloadItem&g2_itemId=38417&g2_serialNumber=3',
           'http://w7t.ru/zooms/7da1/7/6168262b44.jpg',
           'http://imgs.mi9.com/uploads/cartoon/4834/disney-cartoon-wallpaper_1366x768_88837.jpg',
           'http://biskvitka.net/uploads/posts/2011-05/thumbs/1306582219_12.jpg'
       ];

       function preloadImages(src, callback) {
           var len = src.length;
           $.each(src, function () {
               $("<img/>", {
                   "src": this,
                   "css": {
                       "width": 180,
                       "height": 120
                   },
                   "load": function () {
                       $(this).appendTo('body');//для теста
                       len--;
                       !len && callback && callback()
                   }
               })
           });
       };

       preloadImages(arr_src, function () {
           alert('complete')
       })
   })
  </script>
</head>

<body>
</body>

</html>

Спасибо, что помогаете. Мои эксперименты показали, что мигание это следствие того, что все элементы display:none, кроме текущего. И потом делается отображение hide() текущему, и show() новому.

Мигание исчезает, если я все элементы всегда отображаю и переключаюсь между ними. Но вылез баг, стрелка влево работает корректно, а вправо - нет. Надо сделать круг вокруг дома и только тогда она начинает работать.

Подскажите, как поправить

http://ярославский27.рф/fly2.php

Сделал через z-index

http://ярославский27.рф/fly4.php

Цитата:

Сообщение от paveltkachev

Сделал через z-index

замечательно - тотже вариант думал предложить)))

Проблема с z-index в том, что под старыми мобильными, особенно на opera-mini дом не прокручивается, а показывается сразу следующая точка останова. А hide/show - полёт показывает, но мигает на десктопах, особенно на IE.

Почему не работает корректно hide/show в
http://ярославский27.рф/fly2.php
?

Это бы решило обе проблемы.

На айфоне через z-index тоже не летает.

paveltkachev,

<!DOCTYPE html>

<html>
<head>
  <title>Облёт дома</title>
  <meta charset="utf-8">
  <base href="http://xn--27-6kci4agff0atmd9o.xn--p1ai/" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</script>
  <style>
          #mainframe{
                width:800px;
                height:600px;
                position:relative;
            }
            #leftarrow{  z-index: 110;
                width:25px;
                height:25px;
                position:absolute;
                top:300px;
                left:25px;
                background:url(/image/3D-fly/left.png) left top no-repeat;
            }
            #flyin{
                width:25px;
                height:25px;
                position:absolute;
                top:370px;
                left:440px;
                background:url(/image/3D-fly/dvor.png) left top no-repeat;
            }
            #rightarrow{  z-index: 110;
                width:25px;
                height:25px;
                position:absolute;
                top:300px;
                left:750px;
                background:url(/image/3D-fly/right.png) left top no-repeat;
            }
            #leftarrow:hover{
                background:url(/image/3D-fly/lefth.png) left top no-repeat;
                cursor: pointer;
            }
            #rightarrow:hover{
                background:url(/image/3D-fly/righth.png) left top no-repeat;
                cursor: pointer;
            }
            .houseframe1, .houseframe2{
                width:800px;
                height:600px;
                position:absolute;
            }
            .curentframe{
                z-index: 100;
            }

  </style>
</head>

<body>
  <div id="mainframe"><img data-frame1="1" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/1.jpg" class=
  "houseframe1 curentframe"><img data-frame1="2" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/2.jpg" class=
  "houseframe1"><img data-frame1="3" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/3.jpg" class=
  "houseframe1"><img data-frame1="4" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/4.jpg" class=
  "houseframe1"><img data-frame1="5" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/5.jpg" class=
  "houseframe1"><img data-frame1="6" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/6.jpg" class=
  "houseframe1"><img data-frame1="7" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/7.jpg" class=
  "houseframe1"><img data-frame1="8" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/8.jpg" class=
  "houseframe1"><img data-frame1="9" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/9.jpg" class=
  "houseframe1"><img data-frame1="10" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/10.jpg" class=
  "houseframe1"><img data-frame1="11" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/11.jpg" class=
  "houseframe1"><img data-frame1="12" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/12.jpg" class=
  "houseframe1"><img data-frame1="13" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/13.jpg" class=
  "houseframe1"><img data-frame1="14" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/14.jpg" class=
  "houseframe1"><img data-frame1="15" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/15.jpg" class=
  "houseframe1"><img data-frame1="16" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/16.jpg" class=
  "houseframe1"><img data-frame1="17" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/17.jpg" class=
  "houseframe1"><img data-frame1="18" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/18.jpg" class=
  "houseframe1"><img data-frame1="19" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/19.jpg" class=
  "houseframe1"><img data-frame1="20" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/20.jpg" class=
  "houseframe1"><img data-frame1="21" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/21.jpg" class=
  "houseframe1"><img data-frame1="22" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/22.jpg" class=
  "houseframe1"><img data-frame1="23" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/23.jpg" class=
  "houseframe1"><img data-frame1="24" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/24.jpg" class=
  "houseframe1"><img data-frame1="25" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/25.jpg" class=
  "houseframe1"><img data-frame1="26" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/26.jpg" class=
  "houseframe1"><img data-frame1="27" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/27.jpg" class=
  "houseframe1"><img data-frame1="28" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/28.jpg" class=
  "houseframe1"><img data-frame1="29" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/29.jpg" class=
  "houseframe1"><img data-frame1="30" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/30.jpg" class=
  "houseframe1"><img data-frame1="31" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/31.jpg" class=
  "houseframe1"><img data-frame1="32" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/32.jpg" class=
  "houseframe1"><img data-frame1="33" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/33.jpg" class=
  "houseframe1"><img data-frame1="34" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/34.jpg" class=
  "houseframe1"><img data-frame1="35" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/35.jpg" class=
  "houseframe1"><img data-frame1="36" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/36.jpg" class=
  "houseframe1"><img data-frame1="37" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/37.jpg" class=
  "houseframe1"><img data-frame1="38" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/38.jpg" class=
  "houseframe1"><img data-frame1="39" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/39.jpg" class=
  "houseframe1"></div>
  <script>
$(window).load(function () {
       $('#mainframe').append('<div id="leftarrow"><\/div><div id="flyin"><\/div><div id="rightarrow"><\/div>');
       var frames = $('.houseframe1'),
           k = 0,
           len = frames.length;

       function move(b) {
           var a = 4;
           (function c() {
               a--;
               k = (k + b) % len;
               0 > k && (k += len);
               frames.removeClass("curentframe").eq(k).addClass("curentframe");
               a && setTimeout(function () {
                   c()
               }, 40)
           })()
       };
       $('div#rightarrow').click(function () {
           move(1)
       });
       $('div#leftarrow').click(function () {
           move(-1)
       });
   });
  </script>
</body>
</html>

Вот такой подход прекрасно работает на всех мобильных
http://ярославский27.рф/fly1.php

Но мигает на десктопах. Нажмите на оранжевую кнопку по центру

paveltkachev,
:)

<!DOCTYPE html>

<html>
<head>
  <title>Облёт дома</title>
  <meta charset="utf-8">
  <base href="http://xn--27-6kci4agff0atmd9o.xn--p1ai/" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</script>
  <style>
          #mainframe{
                width:800px;
                height:600px;
                position:relative;
            }
            #leftarrow{
                z-index: 110;
                width:25px;
                height:25px;
                position:absolute;
                top:300px;
                left:25px;
                background:url(/image/3D-fly/left.png) left top no-repeat;
            }
            #flyin.curent{ z-index: 120;
                width:25px;
                height:25px;
                position:absolute;
                top:370px;
                left:440px;
                background:url(/image/3D-fly/dvor.png) left top no-repeat;
            }

            #rightarrow{  z-index: 110;
                width:25px;
                height:25px;
                position:absolute;
                top:300px;
                left:750px;
                background:url(/image/3D-fly/right.png) left top no-repeat;
            }
            #leftarrow:hover{
                background:url(/image/3D-fly/lefth.png) left top no-repeat;
                cursor: pointer;
            }
            #rightarrow:hover{
                background:url(/image/3D-fly/righth.png) left top no-repeat;
                cursor: pointer;
            }
            .houseframe1, .houseframe2{
                width:800px;
                height:600px;
                position:absolute;
                opacity: 0;
 
            }
            .curentframe{
                opacity: 1;
            }

  </style>
</head>

<body>
  <div id="mainframe"></div>
  <script>
$(window).load(function () {
       $.each(Array(39), function (indx, element) {
           $("<img/>", {
               "src": "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/" + (indx + 1) + ".jpg",
               "class": "houseframe1"
           }).appendTo('#mainframe')
       });
       $.each(Array(51), function (indx, element) {
           $("<img/>", {
               "src": "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/flyin/" + (indx + 1) + ".jpg",
               "class": "houseframe2"
           }).appendTo('#mainframe')
       });
       $("img:first").addClass("curentframe");

       $('#mainframe').append('<div id="leftarrow"><\/div><div id="flyin" class="curent"><\/div><div id="rightarrow"><\/div>');

       function move(cls, b, l) {
           var frames = $(cls),
               k = frames.index($(cls + ".curentframe")),
               len = frames.length;
           var a = l || len - 1;
           (function c() {
               a--;
               k = (k + b) % len;
               0 > k && (k += len);

               $(".curentframe").removeClass("curentframe");
               frames.eq(k).addClass("curentframe");
               (k < 2 || k > len - 3) && cls == '.houseframe1' ? $("#flyin").addClass("curent") : $("#flyin").removeClass("curent");
               a && setTimeout(function () {
                   c()
               }, 40)
           })()
       };
       $('div#rightarrow').click(function () {
           move('.houseframe1', 1, 4)
       });
       $('div#leftarrow').click(function () {
           move('.houseframe1', -1, 4)
       });
       $('div#flyin').click(function () {
           move('.houseframe2', 1)
       });

   });
  </script>
</body>
</html>

Почему jquery-1.9.1.js?

Цитата:

Сообщение от paveltkachev

Почему jquery-1.9.1.js?

это последняя версия которая поддерживает старые браузеры

Спасибо за разъяснение. Я думал, что вся ветка 1 поддерживает все браузеры, а в ветке 2 отказать от IE6-8.

Вот я тестирую Ваш код в IE9, и там есть мигание. После облёт вокруг дома оно пропадает.

Цитата:

Сообщение от paveltkachev

Вот я тестирую Ваш код в IE9, и там есть мигание.

немогу вам помочь потому что данного эффекта ненаблюдаю -- возможно у вас не все картинки загрузились когда вы нажимаите на кнопки анимации.об этом уже говорилось

Я смотрю закладку сеть при нажатии на f12 и там все картинки подгружены. А вы тоже смотрите в IE9?

paveltkachev,
только через эмуляторы IE9 )))

Эмулятор работает лучше, чем настоящий...

Я воспользовался Вашей идеей с opacity. И теперь мигание пропало.
http://ярославский27.рф/fly5.php

Но отвалилась OperMini. Но это не так страшно. Зато мигает теперь в IE10...

Работает!
http://ярославский27.рф/fly6.php

Спасибо, Вам, Рони. Вместо background использован img, вместо hide/show использован opacity. Мигание нет ни на десктопах, ни на мобильных устройствах. Единственное, что в OperaMini это не работает.