(Quando a página da web é carregada, às vezes o conteúdo é demais e foi carregado e esperando. Nesse momento, a página da web mostra que o branco não mostra nada. A experiência do usuário é bastante ruim. Portanto, a forma de tira é exibido para usuários.
As maneiras comuns são as seguintes:
1. A barra de progresso do timer (falsa) <script type = text/javascript> $ (function () {var loading = '<div class = carregamento> <div class = pic> </div> </div>'; $ (corpo). g); function () {$ (. Carregando) 2. Conteúdo real de aquisição, perceba a barra de progresso de carregamentoPara carregar a barra de progresso de acordo com o conteúdo real, dois pontos de conhecimento são introduzidos abaixo:
Document.onReadyStateChange Página de status de carregamento Alterações de evento
document.readystate retorna o status do documento atual
1. Não -inicializado -ainda não começou a carregar
2. Carregando -
3. Interactive -carregado, documento e usuário podem começar a interagir
4. Completo -carregamento completo
2.1. Document.onReadyStateChange = function () {if (documeted.readyState == Complete) {$ (. carregamento) .fadeout ();}} 2.2.Site recomendado: https://preloaders.net/ Este site possui várias pequenas animações que indicam carregamento carregado
http://autoprefixer.github.io/ para adicionar prefixos ao CSS online
https://loading.io/ Animação Progressiva
2.3: O progresso está posicionado na cabeça, como mostrado abaixo:Nota: Esta realização não é a exibição real do progresso do carregamento, mas usa: o princípio da execução do código de cima para baixo
Em diferentes posições do código, altere a largura das linhas.
Como mostrado abaixo:
2.4 Obtenha a barra de progresso para carregar dados em tempo realCrie objetos de imagem: Nome do objeto da imagem = new Image ();
Uso: evento online
Nota: O atributo SRC deve ser escrito por trás da ONLOAD; caso contrário, o programa cometerá um erro no IE
O acima é o conteúdo deste artigo.