cyber,
Нет - У тьву две картинки - плохая и хорошая Текущая 1.9мега, Воть нун сделать поплоше - такого же размера ,но с меньшей четкостью дабы её начальный объем был 700 -780КБ (есть сервисы в инете) или закомый фотошопер (у мну памяти не зватат - пытался помочь) Когда перемещаешь - перемещаешь плохую - брауз тратит менее энергии на рендинг такой картинки - двигать 2 мега или 700кил, как остановился ( более чем на о.3-.4сек подсовываешь качественную |
я не пойму просто как будет двигатся карта под картинкой, я так понял нужно сделать что бы они синхронно двигались?
|
cyber,
нет ты хорошую карту изымыешь (меняешь ссылку) на плохую |
самое странное что если картинку не увеличивать а сразу поставить в макс размер то при перемещение тормозов нет :blink:
|
на странице сразу подгружены три картинки
Одна в самой карте(изначально "хорошая" (И Две скрыты z-index:200) это хорошая и "плохая" - это фишка чтобы картинки не переподгружать |
Цитата:
|
Отображать (рендерить) надо через window.requestAnimationFrame
Вместо style.left и style.top надо использовать style.transform = translate(x,y); |
Цитата:
я 2 дня не мог понять почему гугл и другие подобные скрипты юзают translate=) кстати а подругому можно получит текущие значение translate var translate = wrapper[0].style.WebkitTransform.match(/(-[0-9]|[0-9])+/ig); |
Цитата:
|
угу, зачем нужен window.requestAnimationFrame , я понял написав по быстро простенькую анимацию
http://learn.javascript.ru/play/tlW2j
<!DOCTYPE HTML>
<html>
<head>
<style>
*{margin:0;}
.square {
width:50px;
height:50px;
position:absolute;
background-color:black;
}
</style>
<script>
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );
};
})();
}
</script>
</head>
<body>
<div class='square'></div>
<div style='top:70px;' class='square'></div>
<script>
var elem = document.getElementsByClassName('square');
function app (elem,fnc) {
var i = 0;
var back = false;
(function animate () {
elem.style.left= i+'px';
if (i >= 500 || back) {
back = true;
i--;
}
if (!back || i == 0) {
back = false;
i++;
}
fnc(animate);
}());
}
app (elem[0], window.requestAnimationFrame);
app(elem[1],function ( callback, element ) {
window.setTimeout( callback, 1000 / 60 );
})
</script>
</body>
</html>
вопрос в другом как это поможет в моем случае? |
| Часовой пояс GMT +3, время: 19:09. |