ApoorvSaxena / ApoorvSaxena/lozad.js

Issue with Safari (12.0.3) imgs don't load with picture tag

Aperta
#182 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
7.5k
Fork
435
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.