Você pode usar o método .hasAttribute()
do JavaScript que já retorna um booleano se o atributo existe ou não no elemento:
document.getElementsByTagName("img")[0].hasAttribute("data-src") // retorna true ou false
Ou outros métodos para verificar se é diferente de undefined
. Nesses métodos, o código irá tentar pegar o valor do data-src
. Se o atributo não existir, retornará undefined
:
// JS método 1
if( document.getElementsByTagName("img")[0].hasAttribute("data-src") ){
console.log("tem com JS puro - método 1");
}
// jQuery
if( $("img").data("src") !== undefined ){
console.log("tem com jQuery");
}
// JS método 2 (IE11+)
if( document.getElementsByTagName("img")[0].dataset.src !== undefined ){
console.log("tem com JS puro - método 2");
}
// JS método 3
if( document.getElementsByTagName("img")[0].getAttribute("data-src") !== undefined ){
console.log("tem com JS puro - método 3");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img data-src />
Mas isso só vai funcionar se você tiver apenas 1 <img>
na página. Se tiver mais de uma, será necessário fazer um laço
para iterar cada um dos elementos, caso contrário só irá pegar o primeiro elemento <img>
.