Eu tenho 2 arquivos CSS externos que contém backgrounds da página.
Em 1 só tem links para imagens .webP e em outro somente .PNG , eu estou usando um script para detectar se o browser aceita .webP e caso afirmativo ele altera o link CSS externo em HEAD para o css externo com .webP, por padrão inicialmente ele aponta para o .png, testei numa página mais simples e deu ok, mas na hora de colocar aonde quero não funcionou, segue o código:
No HEAD:
<link href="arquivos_css/png.css" rel="stylesheet" id="key">
No JS:
//////////////////////////////////////////////////////////////
// FUNÇÃO QUE CRIA O LINK EXTERNO CSS PARA INSERIR NO HEAD // OK//
//////////////////////////////////////////////////////////////
function loadCSS(url){
var link = document.createElement('link');
link.setAttribute('href', url );
link.setAttribute('rel', "stylesheet" );
link.setAttribute('id', "key" );
var para = document.getElementsByTagName('head')[0]; //Nó pai HEAD
var velho = document.getElementById('key'); //local exato do elemento a ser substituido
para.replaceChild(link, velho); //Substituímos o velho pelo novo(link)
}
//////////////////////////////
Chamada à função do webP
/////////////////////////////
WebpIsSupported(function(isSupported){
if(isSupported){
//CHAMA A FUNÇÃO LOADCSS e carrega o link CSS externo com WEBP
loadCSS('arquivos_css/webp.css');
}
});
//////////////////////////////////////////////////////////////
// FUNÇÃO QUE DETECTA A COMPATIBILIDADE DO BROWSER COM WEBP //
//////////////////////////////////////////////////////////////
function WebpIsSupported(callback){
if(!window.createImageBitmap){
callback(false);
return;
}
var webpdata = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
fetch(webpdata).then(function(response){
return response.blob();
}).then(function(blob){
createImageBitmap(blob).then(function(){
callback(true);
}, function(){
callback(false);
});
});
}
O erro que está dando no chrome é esse: Failed to load resource: net::ERR_FILE_NOT_FOUND
já mudei na função loadCSS o endreço dos arquivos de loadCSS('arquivos_css/webp.css'); para loadCSS('/arquivos_css/webp.css');
e não funciona....
o arquivo CSS externo contém backgrounds dentro do seletor HTML
tipo :
html {
background-image.....(1);
background-image.....(2);
background-image.....(3);
etc
}
eu vou no elements do chome e está lá no HEAD conforme quero mas não carrega na página e dá este erro no console. –
o que pode estar acontecendo ? ?