The lifecycle of an HTML page has three important events: DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may not yet have loaded. load – not only HTML is loaded, but also all the external resources: images, styles etc. beforeunload/unload – the user is leaving the page. Each event may be useful: DOMContentLoad
I want to do: $("img").bind('load', function() { // do stuff }); But the load event doesn't fire when the image is loaded from cache. The jQuery docs suggest a plugin to fix this, but it doesn't work
縦横比率が決まっていない画像をシステムでランダムに表示する際など、横幅(width)をピクセルやパーセントで固定して縦幅(height)を『auto』にすると便利ですが、InternetExplorer8では高さが0と認識されてしまい、潰れた画像になってしまいます。 IE8で画像のheightがautoで表示されない時の対処方法は以下から。 下記の様な記述ではインターネットエクスプローラー8では画像が表示されません。 img { width: 100%; height: auto; } 下記の様に『width』属性を『inherit』に変え、新たに『max-width』属性を『100%』と指定する事で、IE8でも問題無く表示されます。 img { width: inherit; max-width: 100%; height: auto; } パーセント値ではなくピクセル数で指定することも
簡単な答え onload を使いましょう。 JavaScript var img = new Image(); img.src = "hoge.png"; img.onload = function() { alert("読み込み完了"); } document.body.appendChild(img); var script = document.createElement('script'); script.src = "fuga.js"; script.onload = function() { alert("読み込み完了"); } document.body.appendChild(script); HTML 参考までにHTMLも。 <img src="hoge.png" onload="alert('読み込み完了');"> <script src="fuga.js" onloa
Javascriptをコーディングしていて、IEだけ意図した動作を示さないということはあまりに数多く遭遇するトラブルの一つである。 特にIE9以前のバージョンではそれが顕著であり、そのことに頭を悩ませるのにはもはや慣れたという人も多くいる筈である。この投稿では、IE8で遭遇した不思議な現象についてである。 img要素にonloadイベントをくっつけると画像のロード完了時に関数を実行する事ができるのだが、IE8ではimg要素の画像がキャッシュからロードされるとき、onloadイベントが実行されない。 1. キャッシュから読み込んだ時にonloadイベントが動作しないコード var img = document.createElement("img"); img.src = "画像のパス"; img.onload = function(){alert("読み込んだよ!")}; parentEl
var img = new Image(); img.onload = function() { // event handler }; img.src = 'http://example.com/foo.png'; document.body.appendChild(img); こういうふうに動的に画像をロードして、かつ onload のイベントを取りたい場合。三行目で src 属性に url を設定した時点で即座に非同期のリクエストが飛ぶ。画像のリクエストが完了する前に次の行へ処理が移る。よって src 属性に値をセットする前にイベントリスナの設定をしなくてはいけない。 というのも、たぶん src の挙動をちゃんと理解していなくて、以下のようなコードをサンプルとしてあげているブログなどを複数目にしたので気になったという経緯。 var img = new Image(); img.src
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く