タグ

JavaScriptとlazyloadに関するcolissのブックマーク (2)

  • これならすごく簡単!ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス

    最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態(ビューポート外)はロードさせずに、見えはじめた状態(ビューポート内)の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。 画像はビューポート内にある時、およびスクロールが停止した時にロード。 ロード前の状態は、CSSで簡単にス

    これならすごく簡単!ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス
    coliss
    coliss 2018/10/22
    外部ファイルとimg要素にclassを加えるだけでの簡単実装、400 bytesの超軽量スクリプト。
  • Chromeの新機能がすごい便利!imgやiframeにlazyload属性を加えるだけでLazyLoad対応に

    Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。 「Blink LazyLoad」の機能と使い方、注意点を紹介します。 A Native Lazy Load for the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「Blink LazyLoad」の機能 セキュアなLazyLoadのポリシー 後方互換性 LazyLoadの有効化 参考資料 終わりに 「Blink LazyLoad」の機能 重要度の低いコンテ

    Chromeの新機能がすごい便利!imgやiframeにlazyload属性を加えるだけでLazyLoad対応に
    coliss
    coliss 2018/09/03
    ブラウザのネイティブな機能として、LazyLoadが実装できるようになる。全然関係ないけど、「ものすごいまずい」(野坂昭 如)、「すごい立派な干菓子」(曽野綾子)http://home.soka.ac.jp/~myamaoka/b0412.htm
  • 1