人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryの質問です。
画像単体のブラウザでの読み込みに20?30秒かかる画像(下記hoge.jpg)を
jQueryで動的に表示しようとすると、まったく表示されません。
(画像単体で読み込みに時間がかからないものなら、問題なく表示できます)

解決策があれば教えてください。なるべくシンプルなものほどうれしいです。

url = "http://example.com/hoge.jpg";
$('body').append( '<img src="" id="foo" />' );
$("#foo").attr( 'src', url );

●質問者: P-mako
●カテゴリ:インターネット ウェブ制作
✍キーワード:.jpg BODY hoge jQuery SRC
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● watarum
●35ポイント

jQuery.ajax(options)で設定されているタイムアウトが短い可能性が高いです。下記を参考にどんなエラーが帰ってきているか調べてみて下さい。

http://allabout.co.jp/gm/gc/24218/

もしタイムアウトであった場合、

timeoutを60秒くらいに設定してあげて下さい。

$.ajaxTimeout(60000);

タイムアウトはミリ秒で設定しますので、

1000で1秒ですから60000で60秒です。

実際にそんなに重い画像を開くのは現実的でない気がしますが。。

◎質問者からの返答

タイムアウト設定を変更してもうまくいきません。

明示的な非同期通信でないと有効な設定ではないのではないでしょうか?(違っていたらすみません)

また現実的ではないのは同感ですが、ログインしなければ取得できないURLで、

かつ該当サービス(サーバ)が、驚くほど重いので、やむを得ないんです。

サーバサイドでログイン状態を保持しながらというサンプルも過去に見た記憶が

ありますが、そこまで本格的に対処するほどでもなく、できればjQueryで

手軽に実現できなかと思っていたのですが。


2 ● Cherenkov
●35ポイント

質問文からではjQueryが原因なのかどうかわかりませんが、ひとまず「画像のプリロード」を試してみてはどうでしょう。

あとコメント欄を有効にしたほうが有益です。

var url = 'http://example.com/hoge.jpg';
var img = new Image();
img.id = 'foo'
img.src = url;
img.onload = function(){
 document.body.appendChild(img);
}


// jQueryでたぶん同じコード
var url = 'http://example.com/hoge.jpg';
$('<img id="foo">').attr('src', url).load(function(){
 $('body').append(this);
});

画像のプリロード - Google 検索

◎質問者からの返答

プリロードも期待どおりの結果は得られませんでした。

1番目の回答者さんのタイムアウトとURLにあるエラーハンドリングも実装しましたが、

いずれもNGでした。(エラーハンドリングはコールバックしません)

ちなみに、.loadの無名関数へのイベントフックは、通常の画像であれば問題なく

コールされています。

また、時間がかかるURL(画像)についても、単体でブラウザで表示する分には相当

時間がかかりますが、表示されます。(というのは質問文にも書いてありましたね)

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ