2

lazyload の画像構文が data-original と共に img タグを必要とし、Picturefill の構文にそれらの場所がない場合、lazyload.js を Picturefill に組み込む方法を考えています。

たとえば、これは Picturefill を使用した画像のマークアップです。

  <span data-picture data-alt="Operating room 2 stands vacant in Dr. Tariq Mahmood's closed Renaissance Hospital in Terrell, Texas.">
            <span data-src="img/main1_small.jpg"></span>
            <span data-src="img/main1_small_x2.jpg"     data-media="(min-width: 300px) and (min-device-pixel-ratio: 2.0)"></span>
            <span data-src="img/main1_small.jpg"        data-media="(min-width: 300px)"></span>
            <span data-src="img/main1_medium_x2.jpg"    data-media="(min-width: 601px) and (min-device-pixel-ratio: 2.0)"></span>
            <span data-src="img/main1_medium.jpg"       data-media="(min-width: 601px)"></span>    
            <span data-src="img/main1_large.jpg"        data-media="(min-width: 1101px)"></span>                                       

            <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
            <noscript>
                <img src="img/main1_small.jpg" alt="Operarting room 2 stands vacatn in Dr. Tariq Mahmood's closed Renaissance Hospital in Terrell, Texas.">
            </noscript>
         </span>

lazyload.js が必要とする class 属性を image タグまたは data-original 属性のどこに配置するかわかりません。lazyload.js を Picturefill と一緒に実装する方法、または Picturefill の使用を維持しながら画像を遅延ロードするその他の方法に関するアイデアはありますか?

4

2 に答える 2

0

これを実現するために、picturefill.js のカスタマイズされたバージョンを作成しました。

https://gist.github.com/sheadawson/dd4891fa13f82f6a9b20

でデモ

codepen.io/sheadawson/ペン/fvFLc

于 2014-07-18T02:33:17.147 に答える