Autor Zpráva
Marti_n
Profil
// EDIT: Problém vyriešený stačilo pridať do css pre chrome: image-rendering: -webkit-optimize-contrast;

Zdravím

Podrobne rozpíšem svoj problém.
Mám na stránke iba obrázok a javascript na jeho pohyb. Obrázok má rozmer 2703x1908 a má 2.55MB (jpg).
Dlžka obrázka je v CSS na 100% a výška na 144.66% (pomer), takže sa prispôsobuje displeju.
Tých 44.66% obrázka logicky nie je vidieť na displeji. Takže mám javascript, ktorý cez drag, umožnuje ťahanie obrázka hore a dole.
Obrázok sa ťahá hore a dole, má určené limity, pokiaľ sa môže ťahať, teda do -44.66%.

Mozilla: Ide všetko, pekne.
Chrome: Jemné sekanie, nie je plynulé to ťahanie. (čakal som to práve naopak, že mozilla bude robiť problémy)

Postreh ku Chrome:

Keď som ešte nemal určené limity obrázka, teda dal sa ťahať na výšku aj keď už bol koniec obrázka. Keď som prešiel na koniec obrázka a videl som už biele pozadie, tak vtedy už tahanie išlo ako na mozille. Zapol som si na Chrome aj FPS meter a keď to išlo pekne, tak ukazoval 40-50.
Keď mi to zasekáva, tak ukazuje okolo 10-12.. Neviem či je to tým.

// EDIT: Chrome má nástroj, volá sa continuous page repainting a ten mi pri ťahaní ukazuje hodnotu okolo 80-90.

Prikladám aj kód.

var drag_background = null;
var move_background_top = 0;
var background_limit_top = 0;
var background_limit_bottom = 0;
var start_y,end_y,y_value;
   
   function drag_click(event,type)
   {
      var target = event ? event.target : window.event.srcElement;

         if(target.id=='background')
         {
               if(type==1)
               {
                  start_y = event.clientY;
               }
               else
               {
                  start_y = event.touches[0].pageY;
               }
            
            drag_background = 1;
         }
      
      return false;       
   }
   
   function drag_move(event,type)
   {
         if(drag_background!=null)
         {
               if (type==1)
               {
                  end_y = event.clientY;
               }
               else 
               {
                  end_y = event.touches[0].pageY;
               }
              
            y_value = end_y - start_y;
            start_y = end_y;
            
               if((move_background_top + y_value)<background_limit_top && (move_background_top + y_value)>background_limit_bottom)
               {
                  var elem_background = document.getElementById('background');
                  elem_background.style.top = move_background_top + y_value + 'px';
            
                  move_background_top = move_background_top + y_value;
               }
         }
         
      return false;         
   }
   
   function drag_down()
   {
      drag_background = null;

      return false;
   }

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: