natto_tamagoのブックマーク / 2015年2月13日

natto_tamago id:natto_tamago

2015年2月13日のブックマーク (3件)

imagesLoaded
imagesLoaded JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded. imagesLoaded on GitHub 8,000 Edit this demo or vanilla JS demo on CodePen. Just to keep things interesting, there’s a 10% chance of adding a broken image. Install Download imagesloaded.pkgd.min.js minified imagesloaded.pkgd.js un-minified CDN <script src="https://unpkg.
natto_tamago 2015/02/13
指定した画像全部の読み込み完了時に実行する等々ができるライブラリ。ajax的なものとも組み合わせできる

jQuery

Library
リンク
jQuery リファレンス：jQuery.when
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素）属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
natto_tamago 2015/02/13
whenとdoneの使い方。when内の処理が完了したらdone内が実行される。

jQuery
リンク
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
natto_tamago 2015/02/13
二重で読み込ませない方法。※breakpoints.jsはスクロールバー分ずれてPCでだめだった＞＜他の方法と組み合わせて実装する

レスポンシブ

jQuery
リンク
- 2015年2月14日
- 2015年2月13日
- 2015年2月12日