2017年3月22日水曜日

img 要素の src 属性と onload イベントリスナの設定タイミング

http://please-sleep.cou929.nu/onload-handler-setting-timing-and-async-request-of-image-element.html

imgタグなどでonloadイベントを取りたい場合、srcを設定する前に onloadを記述しておくべきという話。

(下記のコードは上記サイトからの引用)
var img = new Image();
img.src = 'http://example.com/foo.png';
img.onload = function() { // このタイミングではすでにロードが完了している可能性がある
// event handler };
document.body.appendChild(img); 

2017年3月17日金曜日

iOS Safari プライベートブラウズがオンのとき、localStorageが使えない

http://cly7796.net/wp/javascript/can-not-be-used-localstorage-when-private-browsing-in-ios/

  • プライベートブラウズで確認することも多いと思いますが、iOS Safariのプライベートブラウズだと、localStorageが使えません。
  • setItemsなどをすると、そこでコケてしまい、それ以降は動作しなくなります。

2017年3月16日木曜日

input type=range をカスタマイズ

http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
これが比較的うまくいくが、iOSとAndroidは標準になってしまう。

http://jsdo.it/kingpanda/8UZS
これは、IEとEDGEが変わらない。

Android4.3以下でSVGがおかしくなる

https://iwb.jp/android-4-3-svg-image-display-illustrator/


  • 4.4より前のAndroidの場合、Illustratorで書き出したSVGファイルが正しく表示されないことがある。
  • Illustratorで書き出す際に「レスポンシブ」のチェックを外す(widthとheightをSVG内に指定する)ことで問題なく表示される

2017年3月13日月曜日

画像の本来のサイズ(px)を取得する

naturalWidth と naturalHeight で取得できる。
jQueryでとれるか分からない。

var w = document.querySelector('img').naturalWidth;
var h = document.querySelector('img').naturalHeight;

ごちゃごちゃ質疑があるので無駄情報も多いですが、一応知ったキッカケページなのでリンクはります。
http://stackoverflow.com/questions/318630/get-the-real-width-and-height-of-an-image-with-javascript-in-safari-chrome

document ready と window load の違い

画像の読込もおわってから処理したいときは、$(window).load を使おう。

https://www.softel.co.jp/blogs/tech/archives/2425

2017年3月11日土曜日

HTML data-*属性

HTMLの属性(attribute)として、data-* とついているものがよくありますが…
他の属性と違った取り扱いができるらしい(しらなかった!)

jQueryだと、
<tag data-abc="myValue">
に対して、
$(selector).data("abc")
で値が取得できます。
ふつうに属性取得するのは、
$(selector).attr("data-abc")

このデータの扱いについて、少し注意が必要そう。
http://qiita.com/Kta-M/items/2eda39750abd10df9801

2017年3月9日木曜日

phonegapでinput type="file"を含むiOS10向けアプリがクラッシュするときの対応策

http://www.g8production.com/post/153868432226/dyld-abortwithpayload-ios10-crash

記事のうち、
<!-- 🖼 Photo Library -->
<key>NSPhotoLibraryUsageDescription</key>
<string><Your description goes here></string>

<!-- 📷 Camera -->
<key>NSCameraUsageDescription</key>
<string><Your description goes here></string>

をプロジェクトのInfo.plist(プロジェクト名-Info.plist)に追加すればよい