2

レスポンシブ画像の回避策として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 ) {
   ...
4

0 に答える 0