1

フルスクリーンの画像ギャラリーを表示するために、組み込みの遅延読み込み機能を備えた slick.js カルーセルを使用しています。私が抱えている 1 つの問題は、レイジー ローダーは img タグを使用してのみ表示されるため、background-size:cover を適用できず、js プラグインを使用してフルスクリーンにすることでやり過ぎたくないことです。誰にもアイデアはありますか？

4

1 に答える 1

2

本当にimgタグを使用する必要があります。slick は属性セットを持つタグdivに遅延読み込み効果を追加するだけなので、タグに遅延読み込みを使用することはできません。プラグインのソースから:imgdata-lazy

$('img[data-lazy]', _.$slider).not('[src]').addClass('slick-loading');

あなたがする必要があるのは、各imgタグをタグに入れることだけですdiv:

<div class="a-slide">
    <img data-lazy="http://lorempixel.com/800/800/animals/"/>
</div>

次に、と同じように、タグの高さと幅を 100% に設定htmlしbodyますdiv。imgただし、タグの高さと幅も 100% にすることを忘れないでください。その上、必要さえありませんbackground-size:cover。ただし、画像の品質をあまり低下させたくない場合は、使用object-fit: cover;してください。CSS は次のようになります。

html{
    height: 100%;
    min-height: 100%;
}

body{
    height: inherit;
    width: inherit;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.a-slide{
    height: inherit;
    width: inherit;
}

.a-slide img {
    height: inherit;
    width: inherit;
    object-fit: cover; /* This is a new property that can be used on img tags */
}

lazyLoad次に、設定をondemandまたはに設定して、必要に応じてスリックプラグインを呼び出しますprogressive。

$('.lazy-slick').slick({
    lazyLoad: 'ondemand'
});

ワーキングデモ

それが期待どおりの動作でない場合は、遠慮なく言ってください。

于 2015-07-22T15:37:43.207 に答える