<img src="lazy.png" data-kjkjsdfkjf="realurl.png">
<img src="lazy.png" data-3a4244454a="realurl.png">
<img src="lazy.png" data-32423fasf="realurl.png">
<img src="lazy.png" data-dasflkj="realurl.png">
how can i change every data-* to src?
$("img").lazyload({
onError: function (element) {
$(element).attr('src', jQuery(element).attr('data-*'));
}
});
>Solution :
This works in vanilla JavaScript:
<img src="lazy.png" data-kjkjsdfkjf="realurl.png">
<img src="lazy.png" data-3a4244454a="realurl.png">
<img src="lazy.png" data-32423fasf="realurl.png">
<img src="lazy.png" data-dasflkj="realurl.png">
<script>
// gets all images in document (you can do this with only a specific div instead of document if needed)
let images = document.getElementsByTagName("img");
// loops through images
for(let i = 0; i < images.length; i++){
// the current image in the loop
let image = images[i];
// gets the name of the first property in the dataset
let dataName = Object.keys(image.dataset)[0];
// gets actual value in dataset from the name we found above
let realUrl = image.dataset[dataName];
// sets the new src
image.src = realUrl;
}
</script>