レスポンシブ画像の回避策としてpicturefillを使用し、画像の遅延読み込みにlazysizesを使用していますが、かなりうまく機能します。現在、Internet Explorer (11) のコンソールにいくつかのエラーがあります。
Unable to get property 'push' of undefined or null reference
候補がnullまたは未定義のようですが、他の場所でも機能し、IEの画像やHTMLに目に見えるエラーがないため、特定できません。エラーは、lazysizes が使用されている場合にのみ発生します。picturefill のみでは、これは当てはまらないようです。
lazysizes で picture 要素を使用する方法の例を次に示します。
<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>
ピクチャフィル スクリプトは、次のように、requireJS を使用してフッターに読み込まれます。
var picturefill = require('picturefill');
lazysizes スクリプトもフッターに読み込まれます。ピクチャフィルの前にロードされます。
ここで何が問題なのかについてのアイデアはありますか? 私は何が欠けていますか?
更新: ここでエラーが発生したようです (picturefill.js):
imageData.sets = [];
if ( hasPicture ) {
imageData.pic = true;
getAllSourceElements( parent, imageData.sets );
}
2 番目の変数は、未定義であるというエラーをスローする候補として使用されます。
function getAllSourceElements( picture, candidates ) {
...