CODEWITHSUNDEEP
javascripthtmlinternet-explorerpicturefill
NthDegree
NthDegree

Reputation: 1341

Picturefull/Lazysizes: Unable to get property push in IE

I'm using picturefill as a responsive image workaround and lazysizes for lazy loading images and it works pretty well. Now there are some errors in the console of Internet Explorer (11):

Unable to get property 'push' of undefined or null reference

Printscreen of the message: enter image description here

It seems like candidates is null or undefined, but I can't quite pin it down because it works everywhere else and also doesn't have visible errors in the images or the HTML in IE. The errors only occure if lazysizes is used, with picturefill only this doesn't seem to be the case.

Here's an example of how I use the picture element with lazysizes:

<picture>

<!--[if IE 9]><video style="display: none;"><![endif]-->

<!-- Desktop -->
<source data-srcset="image-desktop.jpg 1x, image-desktop-2x.jpg 2x" media="(min-width: 1024px)" class="lazyload lazypreload">

<!-- Tablet -->
<source data-srcset="image-tablet.jpg 1x, image-tablet-2x.jpg 2x" media="(min-width: 704px)" class="lazyload lazypreload">

<!-- Mobile Big -->
<source data-srcset="image-mobile-big.jpg 1x, image-mobile-big-2x 2x" media="(min-width: 384px)" class="lazyload lazypreload">

<!--[if IE 9]   ></video><![endif]-->

<!-- Default Mobile -->
<img class="picturefill__image class="lazyload lazypreload" data-srcset="image-mobile.jpg 1x, image-mobile-2x.pg 2x" src="loader.gif" />

</picture>

The picturefill script is loaded in the footer with requireJS as follows:

var picturefill = require('picturefill');

The lazysizes script is also loaded in the footer, the same way picturefill is with requireJS. It's loaded before picturefill.

Any ideas on what's the problem here? What am I missing?

Update: Looks like the error happens here (picturefill.js):

imageData.sets = [];

if ( hasPicture ) {
    imageData.pic = true;
    getAllSourceElements( parent, imageData.sets );
}

The second variable is then used as candidates which throws the error for being undefined:

function getAllSourceElements( picture, candidates ) {
   ...

Upvotes: 2

Views: 694

Answers (0)

Related Questions