Как сделать правильную задержку перед выполнением функции?

Итак, я пытаюсь сделать анимацию загрузки для своего веб-сайта в ASP.NET WebForms. Я заметил, что некоторые страницы загружаются очень быстро, а некоторые нет. Я сделал выполнение анимации таким образом:Как сделать правильную задержку перед выполнением функции?

$(document).ready(function() { 

     $('#loadingImage').hide(); 
     $('#loading').html(""); 
    });

Но теперь я хочу, чтобы сделать задержку, примерно в 1-2 сек для страниц, которые загружаются быстро, чтобы не показывать анимацию для них. я стараюсь делать это таким образом:

setTimeout(checkDocument, 3000); 

    function hideLoading() { 
     $('#loadingImage').hide(); 
     $('#loading').html(""); 
    } 

    function checkDocument() { 
     $(document).ready(hideLoading); 
    };

Мой HTML код:

<div id="loading" style="text-align: center" ><asp:Image ID="loadingImage" runat="server" ImageUrl="~/Images/loading.gif" /></div>

Таким образом, это работает неправильно. Этот код выполнил мою анимацию сразу, а затем отключил анимацию за 3 секунды. Помогите найти правильный путь для этого. И еще одно, у меня есть эта строка кода

$('#loading').html("");

Почему, если мы не используем ничего в качестве аргумента в HTML части, то анимация не может остановиться, когда мы берем «» в HTML, то все работает. Пожалуйста, объясните этот момент.

источник

2016-07-20 whoiskatrin

Честно говоря, я не понимаю, зачем вам нужна такая задержка. Если страница загружается быстро, анимация будет скрыта быстро, поэтому конечный пользователь ее не заметит. – hindmost

@hindmost Я тоже так думаю, но это, к сожалению, видно и выглядит как что-то плохое. – whoiskatrin

@whoiskatrin: разместите свой html –

Что вам нужно сделать, так это сначала сделать анимацию загрузки невидимой, а затем сделать ее видимой после задержки. Наконец, используйте событие document.ready, чтобы скрыть его, когда все загружено. То, что вы сейчас делаете, просто задерживает создание обработчика события document.ready, что не имеет смысла. (Не забудьте, создав обработчик событий на самом деле не выполняет функцию немедленно, он просто создает то, что прислушивается к событию, имевшему место в будущем.)

Изменить определение Див к

<div id="loading" style="text-align: center" hidden>

Это должно быть первое, что помещено в раздел <body> вашей страницы, если это возможно.

Затем, непосредственно под ним, поместите следующий скрипт тег:

<script> 
    function showLoading() { 
    $("#loading").show(); 
    } 

    var loadingTimeout = setTimeout(showLoading, 3000); 

    $(document).ready(function() { 
    clearTimeout(loadingTimeout); //make sure loader doesn't appear if page loads in less than 3 seconds 
    $("#loading").hide(); 
    }); 
</script>

источник

2016-07-20 13:11:25 ADyson

Большое спасибо за объяснение. – whoiskatrin

Как сделать правильную задержку перед выполнением функции?

ответ

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