This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
|
redecomep:backbone:start [2026/02/13 15:38] admin |
redecomep:backbone:start [2026/04/01 15:24] (current) admin |
||
|---|---|---|---|
| Line 11: | Line 11: | ||
| <script> | <script> | ||
| - | // ======================================================================= | ||
| - | // COLE O ENDEREÇO DA SUA IMAGEM (DO PASSO 1) NA LINHA ABAIXO: | ||
| const imageUrl = "https://pop-mg.rnp.br/_media/img-nova.png?w=1500&tok=9471bb"; | const imageUrl = "https://pop-mg.rnp.br/_media/img-nova.png?w=1500&tok=9471bb"; | ||
| - | // ======================================================================= | ||
| function verificarAtualizacaoImagem() { | function verificarAtualizacaoImagem() { | ||
| const imgElement = document.getElementById('backbone-image'); | const imgElement = document.getElementById('backbone-image'); | ||
| const spanTimestamp = document.getElementById('timestamp-backbone'); | const spanTimestamp = document.getElementById('timestamp-backbone'); | ||
| - | |||
| - | // 1. CRIAÇÃO DO "CACHE BUSTER" | ||
| - | // Adiciona um timestamp único ao final da URL para obrigar o navegador a baixar a nova imagem | ||
| - | // Verificamos se a URL já tem "?" para saber se usamos "&" ou "?" | ||
| const separador = imageUrl.includes('?') ? '&' : '?'; | const separador = imageUrl.includes('?') ? '&' : '?'; | ||
| const urlComCacheBuster = imageUrl + separador + 't=' + new Date().getTime(); | const urlComCacheBuster = imageUrl + separador + 't=' + new Date().getTime(); | ||
| - | // 2. PRÉ-CARREGAMENTO (Evita piscar ou mostrar metade enquanto carrega) | ||
| const downloadingImage = new Image(); | const downloadingImage = new Image(); | ||
| - | downloadingImage.onload = function(){ | + | |
| - | // Só troca a imagem na tela quando a nova estiver 100% baixada | + | downloadingImage.onload = function() { |
| - | imgElement.src = this.src; | + | // Garante que a imagem está 100% pronta e sem erros de renderização |
| + | downloadingImage.decode() | ||
| + | .then(() => { | ||
| + | imgElement.src = downloadingImage.src; | ||
| + | }) | ||
| + | .catch(err => console.warn("Imagem incompleta detectada, ignorando atualização.")); | ||
| }; | }; | ||
| - | // Inicia o download da nova imagem | + | |
| + | downloadingImage.onerror = () => console.error("Erro de rede ao buscar imagem."); | ||
| downloadingImage.src = urlComCacheBuster; | downloadingImage.src = urlComCacheBuster; | ||
| - | // 3. ATUALIZAÇÃO DA DATA (Mantemos a URL original para checar o Header) | ||
| fetch(imageUrl, { method: 'HEAD', cache: 'no-cache' }) | fetch(imageUrl, { method: 'HEAD', cache: 'no-cache' }) | ||
| .then(response => { | .then(response => { | ||
| Line 42: | Line 39: | ||
| if (lastModified) { | if (lastModified) { | ||
| const dataModificacao = new Date(lastModified); | const dataModificacao = new Date(lastModified); | ||
| - | spanTimestamp.innerHTML = dataModificacao.toLocaleString('pt-BR', { | + | spanTimestamp.innerHTML = dataModificacao.toLocaleString('pt-BR'); |
| - | day: '2-digit', month: '2-digit', year: 'numeric', | + | |
| - | hour: '2-digit', minute: '2-digit', second: '2-digit' | + | |
| - | }); | + | |
| - | } else { | + | |
| - | spanTimestamp.innerHTML = "Data indisponível."; | + | |
| } | } | ||
| } | } | ||
| - | }) | + | }).catch(e => console.error('Erro no fetch:', e)); |
| - | .catch(error => { | + | |
| - | console.error('Erro ao verificar a data:', error); | + | |
| - | }); | + | |
| } | } | ||
| - | // Roda a função assim que a página carrega | ||
| verificarAtualizacaoImagem(); | verificarAtualizacaoImagem(); | ||
| - | | ||
| - | // Atualiza a cada 60 segundos | ||
| setInterval(verificarAtualizacaoImagem, 60000); | setInterval(verificarAtualizacaoImagem, 60000); | ||
| - | </script> | + | </script> |
| + | |||
| </html> | </html> | ||