Задержка Javascript или div до загрузки страницы

Я искал решение, пытаясь предложить несколько предложений, но ни один из них не работает для сценария, который у меня есть или не понимает правильно, поэтому надеемся, что есть кто-то там, которые могут помочь.Задержка Javascript или div до загрузки страницы

В заголовке заголовка у меня есть сценарий javascript ниже. Он сдвигает 8-й div на странице вверху вниз на страницу. Однако, когда вы посещаете страницу, вы быстро просматриваете содержимое этого div (блок текста) в своем конечном положении, прежде чем оно переместится на страницу. Как мне избавиться от этого быстрого предварительного просмотра и получить текстовый блок div, чтобы он скользил во время загрузки основного изображения?

Ссылка на сайт: http://www.estilosalon.com.au/estilo-salon-philosophy2.html

<script type="text/javascript"> 
i=-700; 
var c; 
function f(){ 
    c=setInterval(function(){inv()},5) 
} 
function inv() 
{ 
    if(i!=0) 
    { 
     i+=5; 
     document.getElementsByTagName("div")[8].style.bottom=i+"px"; 
    } 
    else 
    { 
     clearInterval(c); 
     document.getElementsByTagName("button")[0].parentNode.removeChild(document.getElementsByTagName("button")[0]); 
    } 
} 
</script>

Заранее спасибо!

источник

2013-02-18 zalia

Вы контролируете разметку? Вероятно, лучше было бы захватить div на 'id', а скорее на его счет на странице. –

вы можете сделать его невидимым до того, как javascript коснется его. Также рассмотрите возможность перемещения скрипта после элемента, чтобы вам не пришлось использовать цикл ожидания. –

Возможно, простой набор 'bottom: -700px;' для div перед анимацией ... Там уже есть встроенный атрибут 'style', это хорошее место. – Teemu

Вы можете попробовать следующее:

Добавить класс в <html> тег в качестве запасного варианта, когда нет ЯШ:

<html xmlns="http://www.w3.org/1999/xhtml" class="no-js">

Заменить no-js класс с js класса, поместив этот код перед i=-700; линия

var html = document.documentElement; 
html.className=html.className.replace(/\bno-js\b/,'') + 'js';

Добавьте это в таблицу стилей

html.js #text_box_philosophy{ 
    bottom: -700px; 
}

источник

2013-02-18 08:27:15 darshanags

Хия, спасибо за ответ так быстро. Я пробовал свои инструкции и, похоже, сработал! Просто чтобы проверить с вами, если я сделал правильные вещи; Я изменил свой '' на 'и поместил код' var html 'до' i = -700; ' и добавили последний бит в таблицу стилей. Я просто не уверен, что вы подразумеваете под «в js, замените этот класс no-js классом js», не знаете, как это прочитать. Загрузили изменения, чтобы увидеть их на http://www.estilosalon.com.au/estilo-salon-philosophy2.html. Еще раз спасибо! – zalia

@zalia жалеет о моей грамматике, я торопился, когда записывал шаги. Я исправил это в своем ответе выше. Я просто имел в виду, что вам нужно заменить класс 'no-js' на' js', используя указанный мной код. Я вижу, что вы добавили еще один тег '

Вы можете прикрепить функцию к событию нагрузки тела <body onload="f()"> и установить DIV [8], чтобы display: none в вашем CSS, а затем установить его на document.getElementsByTagName("div")[8].style.display = "block" в f().

Однако, я бы настоятельно рекомендуется использовать JQuery и функцию $().animate анимировать DIV, присвоив Див идентификатор (если добавить больше div элементов перед ним, код сломается), и с помощью $(document).ready() функции JQuery, чтобы уволить исходный код, а не использование <body onload="">. Эти шаги помогут вашему коду работать равномерно в нескольких браузерах.

источник

2013-02-18 08:13:52

Я вижу вашу точку зрения, что jQuery будет предпочтительным методом, я рассмотрю его, но на этом этапе я поеду с другими исправленными предложениями. Я попытался применить то, что вы сказали, я думаю, что я получаю бит, где нужно вставить «document.getElements ....» неправильно, см. Здесь, как я это понял: http: // www.estilosalon.com.au/estilo-salon-philosophy4.html. Спасибо за ваше время, Джейкоб. – zalia

Смежные вопросы