VPF::Как запустить скрипт только после загрузки фона?

RESIN

Дата 15.1.2012, 06:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 8.10.2010

Репутация: нет
Всего: нет

Написал следующий код:

Код


<script type=text/javascript>

function fSetOpacity (object, value) {
  if (value<0) value=0;
  if (value>100) value=100;
  object.style.opacity=value/100;
  object.style.filter='alpha(opacity='+value+')';
}

function fRandom (x) {
  return Math.floor(Math.random()*x);
}

var vRun=3000;

var vInc=0.3;
var vChangeEffect=10;

var vCount=7;
var vWidth=1800;
var vHeight=600;

var vTextSpeed=5;
var vTextCount=<?php echo(count($ANIMATIONTEXT)); ?>;
var aText=[
<?php
foreach ($ANIMATIONTEXT as $text) { ?>    '<?php echo($text); ?>',
<?php
}
?>
    ''];

var vProgress=1000;
var vCurrent;
var vDirX;
var vDirY;
var vDX;
var vDY;
var vOpasity;

var vProgress2=0;

setTimeout(function() {
  vProgress2=vProgress2+vInc;
  if (vProgress2<vChangeEffect) {
    fSetOpacity(document.getElementById('headh2'), 100*(vChangeEffect-vProgress2)/vChangeEffect);
    setTimeout(arguments.callee,20);
  }
  else {
    document.getElementById('headh2').style.display='none';

setTimeout(function() {
  if (vProgress>=100) {
    vProgress=0;
    var vRan=fRandom(vCount);
    while (vRan==vCurrent) {
      vRan=fRandom(vCount);
    }
    vCurrent=vRan;
    vDirX=fRandom(10)>4;
    vDirY=fRandom(10)>4;
    document.getElementById('animationtext').innerHTML=aText[fRandom(vTextCount)];
  }
  vDX=(document.getElementById('animated').clientWidth-vWidth)*0.01;
  vDY=(document.getElementById('animated').clientHeight-vHeight)*0.01;
  if (vDirX) var vShiftX=vDX*vProgress;
  else var vShiftX=vDX*(100-vProgress);
  if (vDirY) var vShiftY=vDY*vProgress;
  else var vShiftY=vDY*(100-vProgress);
  document.getElementById('animated').style.backgroundPosition=vShiftX+"px "+(vShiftY-vCurrent*vHeight)+"px";
  if (vProgress*vTextSpeed<100) document.getElementById('animationtext').style.width=(vProgress*vTextSpeed)+'%';
  if (vProgress>(100-vChangeEffect)) {
    vOpasity=100*(vProgress-100+vChangeEffect)/vChangeEffect;
  }
  else {
    if (vProgress<vChangeEffect) {
      vOpasity=100*(vChangeEffect-vProgress)/vChangeEffect;
    }
    else {
      vOpasity=0;
    }
  }
  fSetOpacity(document.getElementById('transparent'), vOpasity);
  vProgress=vProgress+vInc;
  setTimeout(arguments.callee,20);
},20);

  }
},vRun);

</script>

<div id="animated" style="height: 230px; background: url('img/animationframes.jpg') top repeat-x;">
<div style="background: url('img/animationtop.png') top repeat-x;">
<div id="transparent" style="height: 230px; background: #000;">&nbsp;</div>
<div id="animationtextbg" style="overflow: hidden; height: 50px; line-height: 50px; margin-top: -50px; background: url('img/animationtext.png') top repeat-x;">
  <div id="animationtext" style="height: 50px; line-height: 50px; float: right; overflow: hidden; text-indent: 17px; color: #FFF;"></div>
</div>

<h2 id="headh2"><?php echo($H2TEXT); ?></h2>

</div></div>

Идея в следующем:

Блоку id="animated" задается фоновое изображение (img/animationframes.jpg), содержащее семь картинок, неважно чего, но каждая 1600пх шириной и 800пх высотой. Когда страница загружается, некоторое время (vRun) отображается заголовок ($H2TEXT), после чего он сменяется рандомным куском из animationframes.jpg, который плавно "плывет" по диагонали (направление и стартовая позиция - тоже рандом) при изменении backgroundPosition блока id="animated".

Элемент id="transparent" нужен, чтобы смена таких "роликов" происходила с выцветанием в черный (fSetOpacity).

В блоке id="animationtext" отображается бегущяя строка, текст которой 100% поместится по ширине в родительский элемент, при смене кадров текст строки меняется (массив aText). Остальные блоки просто задают фоны для сглаживания границ блоков.

Работает для любых разрешений экрана (min-width страницы - 1000пх), в браузерах IE, Opera, FireFox, Chrome версий, близких к последним. Так же проверил (и был приятно удивлен скоростью работы) в Miren browser для Android на Motorola Defy. Тормозит сильно в IE (Вот уж новость ))) ) и немного - в FireFox.

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

Как можно сделать так, чтобы до загрузки фонового изображения animationframes.jpg скрипт не начинал выполняться? Быть может, document.onLoad, или window.onLoad или как его там? И еще, в силу своей "зелености", буду благодарен за любые пинания, ругания и указания на быдлокод.

P.s. Хочу сделать это на чистом Js, без сторонних компонентов, типа JQery...

Это сообщение отредактировал(а) RESIN - 15.1.2012, 12:46

Krotlev

Дата 24.1.2012, 03:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 13
Регистрация: 24.1.2012

Репутация: нет
Всего: нет

http://www.google.ru/search?rlz=1C1SVEE_en...%BD%D0%B8%D0%B9

Код


window.onload = function() {
    var images = ['img/animationframes.jpg'];
    var cache = {};
    for (var url in images) {
        cache[url] = new Image();
        cache[url].src = url;
    }

    your_animation_action();
}

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »