Javascript, JQuery, Do функции после другой функции - PullRequest
Новая
       13

Javascript, JQuery, Do функции после другой функции

1 голос
/ 17 мая 2011

У меня есть эта функция javascript. 

<script type="text/javascript">
  $(document).ready(function () {
  $('#load').html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>');
  $('#loaded').fadeIn(1500);
     $('#load').fadeOut(2000);
  });
</script>

Как вы можете видеть, она просто запускает загрузочное изображение в течение нескольких секунд, затем показывает div и скрывает загрузочное изображение.Это не хорошо для меня.Мне нужна функция, которая будет работать таким образом.Логика кода будет такой: 

As soon as $('#load').html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>'); is running, then wait 4 seconds, and then show the #loaded DIV.

Таким образом, #loaded DIV будет полностью загружен и будет работать нормально, поскольку он тяжелый.

В двух словахЯ должен быть уверен, что #loaded был полностью загружен браузером, прежде чем показывать его.Как я могу создать функцию, которая будет делать это?

На документе готово показать загрузочный DIV.Затем подождите 3-4 секунды, затем загрузка исчезнет, ​​и загруженный DIV станет видимым.

Возможно ли это?

Ответы [ 4 ]

3 голосов
/ 17 мая 2011

делает запуск вашего fadein обратным вызовом вашего fadeout. 

    $(document).ready(function() {
        $('#load')
          .html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>')
          .fadeOut(2000, function() {
                $('#loaded').fadeIn(1500);
           });
    });

Но чтобы сделать это правильно, я бы добавил #load div в html, скрыв его через css.Затем просто сделайте fadeOut на document.ready.

update.

Сочетая лучшее из ответа Андрея и моего, это должно работать без нареканий: 

<div id="load" style="display:none">Loading, please wait</div>

$(document).ready(function() {
        $('#load').show();
    $('#loaded').load(function() {
        $('#load').fadeOut(500,function(){  $(this).fadeIn(500);});
    });
});
1 голос
/ 17 мая 2011

Вы можете привязать обработчик к событию load в #loaded div: 

$(document).ready(function() {
    $('#loaded').load(function() {
        $('#loaded').fadeIn(500);
        $('#load').fadeOut(500);
    });
});

См. http://api.jquery.com/load-event/

1 голос
/ 17 мая 2011

Ваш код не будет "загружать" изображение. Все, что он делает, это добавляет тег изображения в DOM. Браузер попытается добавить изображение после добавления тега в DOM.

Лучше всего добавить изображение в HTML-код и скрыть его с помощью css. Затем используйте функцию show в jQuery, чтобы показать его, а не пытайтесь загрузить изображение.

Альтернативой может быть «предварительная загрузка» изображения с помощью javascript, но я не понимаю, как это будет более эффективным.

0 голосов
/ 17 мая 2011

Я немного смущен всеми этими ответами и не уверен, какой у вас вопрос, или я прав, или они правы, но это как ждать 4 секунды. (добавлено 2 строки в исходный код) 

<script type="text/javascript">
  $(document).ready(function () {
    $('#load').html('<img style="display:block; margin:10px auto;background-color: #EEE;" src="<?echo $site["url"];?>images/icons/loading.gif"/>');
    setTimeout(function () {
      $('#loaded').fadeIn(1500);
      $('#load').fadeOut(2000);
    }, 4000)
  });
</script>
...