lazysizes - the ultimate lazyloader for responsive images, iframes and widget
lazySizes lazySizes is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind. Simply add the JS to your website and put the class lazyload to all elements, which should be lazy loaded. For a short API description go to the readme.md. Image with LQIP technique
[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes
スクリプトは外部ファイルを記述するだけ、レスポンシブ用画像の配置や設定はHTMLベースで記述できるスクリプトを紹介します。 超軽量（5.8KB）で、jQueryなど他のスクリプトは不要です。
![[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes](https://cdn-ak-scissors.b.st-hatena.com/image/square/135514efb4694efbd56028728da237fc700e16b1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016022202.png)
FocusPoint·レスポンシブの画像表示に。注目して欲しいポイントを残して表示。 MOONGIFT
レスポンシブWebデザインを取り入れたサイトは増えていますが、HTMLはフレキシブルに変更できても画像リソースはそう簡単ではありません。そのため幅ごとに数パターン画像を用意しているケースもあります。 同じ画像の場合、単にサイズを小さくしてしまうと見るべき場所も小さくなって分かりづらくなります。そこで使ってみたいのがFocusPointです。 FocusPointの使い方 デモです。フォーカスポイントは白い線で囲まれた部分になります。 幅を変更してもフォーカスポイントが中央になっています。画像の大きさ自体は変わっていないですよね。 縦を縮めました。画像が小さくなっていますが白い線で囲まれた部分は残っています。 多数の幅でまとめて表示。全てちゃんと白く囲まれた部分はなるべく多く表示されます。 こちらはカンガルー。 FocusPointは自動的に画像の良い場所を選んでくれる訳ではなく、自分でどの
[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
imagefill.js | Project Page
Simple Example Given this html: <div class="container"><img src="myawesomeimage" /></div> Do this: $('.container').imagefill(); // image stretches to fill container Grid Example Given a grid like this: <div class="grid-whole"> <div class="grid-quarter"> <img src="myawesomeimage.jpg"> </div> <div class="grid-quarter"> <img src="myawesomeimage.jpg"> </div> <div class="grid-quarter"> <img src="myawes
Fluid Images — Unstoppable Robot Ninja
This website is, sadly, defunct. But! Ethan’s new website is here for you to use. (Hello! If you think this article’s interesting, you might check out my ALA article on responsive web design.) I’ve always hated publishing. I don’t mean the industry, but the act. Hitting “print,” sending an email, pressing that “Publish” button on the CMS: at some point, you relinquish your ability to smooth down s
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」:phpspot開発日誌
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 2012年04月12日- Retina.js | Retina graphics for your website Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 <img src="/images/my_image.png" /> という画像タグがあったとするとスクリプトがサーバ上の"/images/my_image@2x.png"というファイルを自動でチェックして存在すれば置き換えてくれます。 インストールはretina.jsを読み込むだけというお手軽さがいいです。 単に高解像度で出したい部分だけファイルを用意して置いてあげればよいというのはお手軽ですね。 <script type="text/javascript" src="/s
[mA] 画像のカジュアルコピーを防ぐ方法
投稿日 : 2011-04-06, 11:33 最終更新日時 : 2011-05-20 18:34:51（履歴） タグ（Javascript / CSS / know-how） カテゴリ（Weblog） 記し人（luvsic）[PDF] 閲覧数（1887） 画像の保存とかを無効化したいとき用に、前もって準備しておくメモ書き。ネタを見つけたら更新対象です。 著作権表示、無断転用の禁止を明記 画像に直接コピーライト表示を表示 CSSで背景に画像を設定 CSSで上から透明gifをかぶせる CSS Sprite でめんどくささアップ Javascript でマウスの右クリックメニューをカスタマイズ Javascript で print screen キーを無効化 Flashで画像表示 右クリック禁止をjQueryで実装（褒められた事ではありませんが、）） | [k]id 画像の盗用を防ぐ（右クリッ
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
Blinds: jQuery Slideshow using CSS sprites - little web things
1 2 3 4 5 6 7 Features Smooth animated transition Customizable sprite grid Customizable animation ochestration Multiple instances on the same webpage jQuery compatible (plugin) Unobtrusive javascript Compatibility Works great on the following browsers: Firefox 3.5 IE 8 IE 7 IE 6 (imagine my surprise!) Opera 10 Chrome 4 Safari 4 Download jquery.blinds-0.9.js Working example Back to project's post U
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
[JS]jQueryを使用したプリロード（画像の先読み）用のスクリプト
ロールオーバーで画像を変更する際に使用するプリロード用のjQueryを使用したスクリプトを紹介します。 Preloading Images with jQuery and JavaScript ロールオーバー時に表示する画像をその都度ダウンロードして表示すると時間のギャップが生じます。その時間の遅れを避けるために、画像を事前にバックグラウンドで読み込みます。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
cmmntr.com
http://retinajs.com/
GitHub - fantasista21jp/jquery.imageloaded.js
GitHub - desandro/imagesloaded: :camera: JavaScript is all like "You images done yet or what?"
http://candrews.net/sandbox/spryMap/
http://candrews.net/sandbox/spryMap
http://caroufredsel.frebsite.nl/