lozad.js
lozad.js copied to clipboard
Issue with Safari (12.0.3) imgs don't load with picture tag
Hi, i have an issue again with Safari with lozad, Img tag in picture don't load on safari 12.1.1 :)
Expected Behavior
img tag in picture load.
Current Behavior
Img tag in picture don't load on safari 12.1.1 and 12.0.3.
IntersectionObserver is imported with https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver
Possible Solution
Maybe a bug with webp or safari don't load img src...
Temporary solution (need a better fix):
function load(element) {
if (element.nodeName.toLowerCase() === 'picture') {
var img = document.createElement('img');
if (isIE && element.getAttribute('data-iesrc')) {
img.src = element.getAttribute('data-iesrc');
}
if (element.getAttribute('data-alt')) {
img.alt = element.getAttribute('data-alt');
}
if (window.safari) {
/*http://jsfiddle.net/z6kH9/*/
function testWebP(callback) {
var webP = new Image();
webP.onload = webP.onerror = function() {
callback(webP.height == 2);
};
webP.src ='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
};
let srcs = element.querySelectorAll('source');
testWebP(function(support) {
if (support) {
for (let src of srcs) {
if (src.srcset.includes('webp')) {
img.src = src.srcset;
return '';
}
}
} else {
for (let src of srcs) {
if (!src.srcset.includes('webp')) {
img.src = src.srcset;
return '';
}
}
}
});
}
element.append(img);
}
Steps to Reproduce (for bugs)
Context
Tested on:
*Safari 12.1.1 *Mojave 10.14.5