元々は、ブラウザ側で画像の存在チェックをして、存在したものだけを表示するという処理を考えてる時に最初に思いついた内容なんですが、画像をロードする時間があるので、全ての画像を表示し終わってから非表示にするというのは、かなり無理があったわけです。画像ファイルが存在した時のみ、表示する jQuery の記述 なので、ロード後のページのチェックならば妥当性があると思い、以下のようなコードを作成しました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> var img = [ "https://lightbox.sakura.ne.jp/toolbox/image/__.png", "https://lightbox.sakura.ne.jp/toolbox/image/script.png", "https://lightbox.sakura.ne.jp/toolbox/image/jquery.png", "https://lightbox.sakura.ne.jp/toolbox/image/__.png", ]; $(function(){ // ページ内の画像のリンク切れを探す $("#action").on( "click", function(){ // 全ての画像 $("img").each(function(){ // ロードイベントが起きておらず、値が 0 のようです。 // ※ 正常な画像もロード前は 0 です if( $(this).get(0).naturalWidth == 0 ) { // 動的テーブルコンテンツ作成 var table = $("#result"); // 行 var row = $("<tr></tr>").appendTo( table ); // 列 var column = $("<td></td>").appendTo( row ); // URL column.text($(this).attr("src")); } }); }); // 動的テーブルコンテンツ作成 var table = $("#target"); for( i = 0; i < img.length; i++ ){ // 行 var row = $("<tr></tr>").appendTo( table ); // 列 var column = $("<td></td>").appendTo( row ); // 画像 var iamge = $("<img>").appendTo( column ); // URL iamge.attr("src", img[i] ); } }); </script> <table id="target"> </table> <input id="action" type="button" value="action"> <table id="result"> </table>
要するに、naturalWidth のメモ書きなんですが、それだけじゃショぼいので、一応でっかい画像を使って直後にチェックしたのでは間に合わないという事を試したわけです( naturalWidth は 0 でした ) テーブルを動的に作るサンプルコードでもありますし、ホント jQuery って便利ですわ。 ▼ 実際にやってみる
ま、結局ブックマークレットにしないと意味無いので年末までには作成しよう。
タグ:jquery
|
【jQueryの最新記事】
- clipboard.js で、2種類のクリップボード処理オブジェクトを作成して使い分ける
- 一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする
- jQuery の $.ajax で JSON 文字列を WEB より取得して TABLE を作成する
- jQuery で DIV の中の DIV を縦横中央に配置する
- クリックした入力フィールド以外をブラックアウトする jQuery プラグイン
- FORM の内容を localStorage に保存する jQuery プラグイン
- tableMagic : 単純に JSON から TABLE、TR、TH、TR、TD を作成する jQuery のプラグイン
- 滑らかなスクロール(scroll bar)を提供する jQuery プラグイン jQuery.NiceScroll
- jQuery : F1 キーでヘルプを起動させないようにする
- jQuery プラグイン jquery.balloon.js に jQuery UI を追加してバルーン毎に違ったアニメーション効果を設定する
- jquery.balloon.js で、balloon をメッセージ表示に使う( ゲーム等で使う為 )
- jQuery プラグイン jquery.balloon.js で複数バルーンにそれぞれ別のコンテンツを設定する為には、.each を使う
- jQuery プラグイン jquery.balloon.js を使用する『画像バルーン』の処理 (Excel で作成した吹き出し)
- jQuery プラグイン jquery.balloon.js の外部からのコントロール
- NAVER : Image*After の城と教会編
- 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。
- jQuery で書かれた、幻想的な動く星座のようなシーン
- jQuery の addClass で、CSS で作成するサイフの出来上がる過程を見れるようにしました
- jQuery/JavaScript でフルスクリーンAPI( スクロールしないし、こりゃあ、WebGL の為にあるような・・・ )
- CSS transition : jQuery の addClass と removeClass で変化を付ければいい。いや、これが一番よさそうだ。