すべての画像をチェックして visibility が hidden のものでサイズが50より小さい場合( 画像がない場合なので適当な数値です )にのみ別の画像に入れ替えます。最初に hidden にしておくのは、ロード時に画像が無いと見栄えが悪いからです。visibility を使うのは、見えないけれどもサイズが確保されるからです jQueryバージョン
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="http://winofsql.jp/image/ok.png" style='visibility:hidden'>
<img src="http://winofsql.jp/image/_ok.png" style='visibility:hidden'>
<script type="text/javascript">
$(function(){
$("IMG").each(function(){
if ( $(this).css("visibility") == "hidden" ) {
if ( $(this).prop("width") < 50 ) {
$(this).prop("src","http://winofsql.jp/image/winofsql.png");
}
$(this).css("visibility", "visible");
}
});
});
</script>
ノーマルバージョン
<img src="http://winofsql.jp/image/ok.png" style='visibility:hidden'>
<img src="http://winofsql.jp/image/_ok.png" style='visibility:hidden'>
<script type="text/javascript">
function noimage () {
var cnt = document.getElementsByTagName("IMG").length;
var i,target;
for( i = 0; i < cnt; i++ ) {
target = document.getElementsByTagName("IMG")[i];
if ( target.style.visibility == 'hidden' ) {
if ( target.width < 50 ) {
target.src = "http://winofsql.jp/image/winofsql.png";
}
target.style.visibility = "visible";
}
}
}
if (window.attachEvent){
window.attachEvent('onload', noimage);
}
else {
window.addEventListener('load', noimage, false);
}
</script>
タグ：javascript
|
|
【JavaScript コンテンツの最新記事】
- jQuery の ajax でアクセス可能なデータをボタンをクリックした後 window.open で開いたウインドウの中にテキストエリアを作成して表示する方法
- IFRAME を ブラウザのサイズ変更時のイベントでコントロールして、HTML5で廃止された FRAME と同様に使うサンプル
- JavaScript : DIV 内に時間範囲のボックスを表示する処理
- JavaScript による、時間範囲の表現( 出退勤等 )
- JavaScript : HTML 特殊文字を書き出すコード( ツール )
- Twitter 縦書き intent
- スマホでYouTubeの埋め込みの表示サイズをJavaScriptでコントロールする
- IFRAME で埋め込んだ外部コンテンツから情報を取得する事ができる postMessage インターフェイス
- WEB フォントを使った「フェードイン、フェードアウト」
- JS : テキストエリア内の選択文字列の置き換え
- IE限定、ローカルファイル参照フィールドを使ったトリック
