lozad.js icon indicating copy to clipboard operation
lozad.js copied to clipboard

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

Open valentinwilliams opened this issue 5 years ago • 0 comments

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

valentinwilliams avatar Jul 22 '19 11:07 valentinwilliams