怠惰な負荷画像に対する新しいデッドシンプルなオープンソースWebコンポーネント
4984 ワード
怠惰な良い女の子または男の子.写真でBrianna Santellan on Unsplash
先月、私はブログのポストを公開しましたが、その後にどのようにしてそれが判明したのか、実際に開発中に何度か自分の薬を使わなければなりませんでしたDeckDeckGo , プレゼンテーションのための我々の今後のオープンソースエディタ.
だからこそ私たちは出版に満足しているnpm 今日新しい死者は単純
オープンソースのWebコンポーネントStencilJS , どのフレームワーク(またはnone)を使用していても、どんな現代的なWebプロジェクトの怠惰な負荷イメージにでも😃
でもどうして？
しかしなぜ怠惰な負荷画像に別のWebコンポーネント?
JavaScriptの2行を書くだけで簡単なときに、なぜ私たちが開発し、怠惰なロードイメージに新しいWebコンポーネントを公開しなければならなかったのかを問うことができますIntersection Observer API , 怠惰な読み込みをサポートするイメージを既に持っていること🤔
実際、前に述べたように、Webコンポーネントを使ったプレゼンテーション用のオープンソースのWebエディタを開発しています.編集したデータを保存するには、プレゼンテーションのスライドをデータベースに保存する必要があります.我々が速度のための我々のツールを開発しているように、すべての構成要素と特にイメージは怠惰にロードされなければなりません.その目的のために、我々は
src 画像の属性は、“オンとオフ”を微調整するときに正確に画像をフェッチする必要がありますし、それは私たちの問題の根本的な原因は、ブラウザを指示します.我々が内容を保存していて、操作していたので
img DOMの要素は、私たちは常に我々のデータベースの“ロードされていない状態”では、余分な機能と再帰のカップルを追加することなく、常に画像を保存していたことを確認することができなかった、我々はそれがプロセスに複雑さと計算時間を追加したとして実装することに同意しなかった.だからこそ、私たちは、カスタムのWebコンポーネントを使用して怠惰なローディングプロセスを分離するため、常にいつでも余分なチェックをせずに正しい状態で我々のデータベースからのイメージとSAVを読み込むことができるようになったのです.
おかしいGIFしかし、それは私たちに実際に何があったかを理解するために3日かかった
解決策😂
フレームワークとの統合
次のNPMコマンドを使用して、プロジェクトにコンポーネントをインストールできます.
npm i @deckdeckgo/lazy-img --save
最後に、プロジェクトに簡単にコンポーネントを使用できます
img タグ付きのタグdeckgo-lazy-img (src and alt あなたが使用する必要がありますimg-src and img-alt ). 要約すると、次のようにコンポーネントを使用できます.
<deckgo-lazy-img
img-src="/assets/img/your_image.png"
img-alt="My lazy loaded image">
</deckgo-lazy-img>
フレームワークなしの統合
また、フレームワークが使用されないプロジェクトでもコンポーネントを使用できます.そのためには、例えばcdnからコンポーネントを使用しますUnpkg , そして、上記のようにそれを消費してください.
繰り返しますが、次のようにできます.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@deckdeckgo/lazy-img@latest/dist/deckdeckgo-lazy-img.js"></script>
</head>
<body>
<deckgo-lazy-img
img-src="/assets/img/your_image.png"
img-alt="My lazy loaded image">
</deckgo-lazy-img>
</body>
</html>
反応
この小さなブログ記事が公開された後、私はフィードバックのカップルを受信しましたresponsive images 属性を使用する
srcset and sizes . もちろん、私はそれが素晴らしい考えだったので、私はすでにそれを実装し、NPM🤪ケーキのチェリー🍒🎂
私の小さなブログ記事で一度だけ、ケーキには1つ以上の桜があります😉
まず第一に、コンポーネントはオープンソースです、そして、コードは我々の利用できますGithub repo , したがって、それにアクセスすることができますし、お客様のニーズに応じてそれを改善する.
第二に、私は私たちのすべての属性と機能を文書化するために少しの時間を取ったdocumentation website .
最後に、交差点のoberserverよりも早く画像を読み込むために「手動で」をトリガーしたい場合があります.そのために、コンポーネントは非同期メソッド
lazyLoad() そうすればそうする😇const element = document.querySelector('deckgo-lazy-img');
await element.lazyLoad();
無限に🚀
ダビデ
Reference
この問題について(怠惰な負荷画像に対する新しいデッドシンプルなオープンソースWebコンポーネント), 我々は、より多くの情報をここで見つけました https://dev.to/daviddalbusco/a-new-dead-simple-open-source-web-component-to-lazy-load-images-113gテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol