表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
スクロールするだけでコンテンツを読み込むプラグイン「jQuery.autopager」 | PLUS
よく見かけるページングの処理で、下の方にスクロールすると自動的に次ページを読み込ませる処理をかんたんに実現してくれるjQuery.autopagerが便利でした。jQueryプラグインです。 導入がかんたんで分かりやすく、オプションも必要最低限のものがバッチリ揃っています。例えば、スクロールで下部までいったら自動的に次コンテンツを表示させるか、それともボタンをクリックして読み込むか、読み込み後にコールバックで関数を読み込ませるか、などなど。 jQuery.autopagerの導入方法 まず、jQuery本体とダウンロードしたjQuery.autopagerを読み込んでおきます。 そして、スクロールで自動表示させるなら下記だけでOK。 <script type="text/javascript"> $(function() { $.autopager(); }); </script> <
ボックス内をスクロールすると自動でコンテンツをロードするjQuery
cssやプログラミングScrolling Dynamic IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。 Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。 Scrolling Dynamic Content box このボックス内でスクロールすると自動で次のコンテンツが読み込まれ、アイテムの数も表示されます。というか、見たほうが早いですね。 デモ コードコードです。
スクロールで順に画像読み込みLazy Load Plugin for jQuery
Mon, Jan 1, 0001 Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader ut
lazyload.jsはスクロール時に画像の読み込みを開始して美しく仕上がる。
大きな栗の木の下で ■当ブログ投稿内容の当事者や関係者の方で、コメントの削除や記事訂正を希望される方は、該当ページのコメント欄よりお申し付けください。可能な限り対応させて頂きます。 lazyload.jsを使うと、画面のスクロールに合わせて画像を読み込むから美しい。 jquery.jsとlazyload.jsをダウンロード＋アップした上で、 head内に以下を追加 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dimensions.min.js"></script> <script type="text/javascript" src="jquery.lazyload.js"></script> <script type="text/ja
ボックス内をスクロールすると自動でコンテンツをロードするjQueryをちょっと変えてみた
この記事は11年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。ボックス内をスクロールすると自動でコンテンツをロードするjQuery – かちびと.net を読んで、ちょっとやってみたくなったので作った。 言ってもたいしたことやってませんがｗ かちびと.netのシロさんには許可を頂いてます。 詳細は以下。 上記記事では、下までスクロールしたあとにワンテンポ置いてから（タイマー処理で）コンテンツがロードされる形になってます。 しかし、IEで見てみるとわかるのですが、内側のスクロールが完了した時点で外側のスクロールも動いちゃうんですね。 なので、ロードされる前にページの下に行ってしまう。 これをちょっと改善できないかなーと思って作ったのがこちら。 Auto Scroll Test コードは以下。 <script type=”text/javascript”> $(functio
『画面スクロールに合わせてコンテンツを読み込む「jquery.lazyload.js」について。』
駆け出しWebエンジニア（２年目）の備忘録です。 興味のない人にはまったくよく分からない内容だと思いますが…。 EC-CUBEのカスタマイズとかやってます。 画面の外にある画像データは読み込まずに、スクロールで表示エリアに来たときに読み込みのタイミングを持ってくる「jquery.lazyload.js（Ajax Lazyload）」。 結構画像をたくさん使ってるページ何かに使うと、ページの読み込みが早くなるので重宝します。 …が、バージョンアップしたのを知らずに、まだ古いバージョンを使っている人がいますね。 これ、古いバージョンを使ってると、読み込みのリクエストを２回してしまうのであまり（というか全然）意味がないわけですが、未だに使ってる人がいるんですよね…。 いままでは、こんな感じでよかったわけです。 <script type="text/javascript"> $(function(
FacebookやTwitterみたいに一番下までスクロールしたら自動的に次を読み込むjQueryプラグイン
一番下までスクロールしたら自動的に次を読み込むって処理をしたかったのでjQueryプラグインを使ってサンプルを作ってみました。 FacebookやTwitterみたいなやつです。 jQuery Bottom かなり簡単なので、あまり説明することはない為、コードだけ貼り付けてみました。 コード プラグインを読み込みます。 適当にHTMLをマークアップします。（空で） プラグインを実行するコードをチョロッと書く これだけ。 setTimeoutの箇所をgetJSONとかで読み込むように書き換えれば色々出来ます。 実行した結果はサンプルをみてください。 作成したサンプルはここ http://sample.b-prep.com/Bottom/index jQuery Bottom
スクロールに合わせてコンテンツの読み込みを開始するjQueryプラグイン「Autobrowse jQuery plugin」｜BLACKFLAG
2011/03/11の「東北地方太平洋沖地震」震災後、しばらく更新が滞っていましたが、少しずつ再開してみようかと思います。 Twitterなどで見かけるページの最下部までスクロールすると続きのコンテンツを読み込む動作を、jQueryで可能とするプラグイン「Autobrowse jQuery plugin」が、ちょっと気になっていたのでメモ書き程度に紹介してみます。 ≫jquery.esn.autobrowse.js 上記チュートリアルページでデモが確認できますが、サンプルではページロード時に決まった数（20個）の画像を先に読み込んでおいて、ページをスクロールするとさらに20個ずつ画像を読み込み、100個まで表示した時点で動作をストップさせています。 使い方もさほど難しくなく、プラグインファイルと下記の実行用スクリプトにて実装が可能なようです。 ◆SCRIPT $(".page").auto
jQueryゼロから / オートロード(スクロールすると次のページを自動読み込み) | ゆるぶ | ページ 513
画面下までスクロールすると次のページを読み込んでくれるヤツですね。 イロイロ見てると次のような考え方みたいす。 対象コンテンツの下端の位置座標が表示エリア(ウィンドウ下端)に近づいたら、続きを読み込みます。これを、ウィンドウをスクロールした時にチェック。 まず、コンテンツの下端の位置座標を求める。対象エリアの id 属性が target なら、以下。
ページの下までスクロールしたときに何らかの処理を実行する例 at softelメモ
ページの下までスクロールしたときに何らかの処理を実行する例 $(window).bind("scroll", function() { scrollHeight = $(document).height(); scrollPosition = $(window).height() + $(window).scrollTop(); if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) { //スクロールの位置が下部5%の範囲に来た場合 } else { //それ以外のスクロールの位置の場合 } }); demo ページをある程度下までスクロールしたときに何らかの処理を実行する – デモ 「本当にぴったり最下部までスクロールしたら」という条件にすることも可能ですが、ある程度範囲を持たせておいた方がよいことが多いでしょう。 条件
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
