[B! 画像][js] kanariya_wwwのブックマーク

kanariya_www id:kanariya_www

画像とjsに関するkanariya_wwwのブックマーク (3)

これならすごく簡単！ページを高速に表示させる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で簡単にス
kanariya_www 2018/10/22
js

画像

class

スクロール
リンク
今の時代、ウェブページは一瞬で表示するべき！画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
kanariya_www 2018/06/08
表示

js

パフォーマンス

画像
リンク
breakpoints.jsを使用したレスポンシブでの画像切り替え
Posted: 2013.07.30 / Category: javascript / Tag: jQuery PCは横長なので画像も横長に作成することが多いですね。しかし、レスポンシブでスマートフォンに対応した場合は、横長画像だとよくわからなくなってしまいます。「breakpoints.js」を使用すれば割りとお手軽にPC用とスマホ用の画像を切替えできますよ。ベースのimgを置き換える方法 htmlではPC用の画像を配置して、クラスを「sp-img」としておきます。 html <img src="img/image-pc.png" class="sp-img"> 「640」をブレークポイントにしますので「breakpoints」オプションに[ 1, 640 ]と指定します。また、ブレークポイントの数だけ「$(window).bind」の部分を追加します。 javascript <s
kanariya_www 2015/01/16
js

画像

jquery

レスポンシブ
リンク
1