3

次のような画像を表示しています。

<img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" />

/get_image/{{image.id}}実際の画像への URL を含む JSON を返し、jQuery を使用してタグのsrc属性を置き換えます。<img>

私が抱えている問題は、画像が完全にダウンロードされた場合にのみブラウザに表示されることです。placeholder.jpg大きな画像の場合、これには時間がかかる場合があり、一部のユーザーは、 「読み込み中...」と表示されているにもかかわらず、画像が読み込まれないと考えています。

すべてがダウンロードされたときに突然表示されるのではなく、プレースホルダーを置き換える画像が実際に目に見えてロードされると (たとえば、ほとんどの JPEG のように上から下に) 素晴らしいと思います。

プログレスバーを表示する方法はさらに良いでしょう。

誰かが提案を持っていますか？

4

3 に答える 3

2

プリローダーを使用できますが、イメージが完全にロードされるまで待つ必要があります。

他の解決策は、画像の保存方法に依存します。

Photoshop などのアプリケーションで画像を開き、ファイルを保存するときに PROGRESSIVE オプションをクリックします (Progressive オプションを使用すると、画像が完全に読み込まれていない場合でも画像が表示されます)。

フォトショップで:

  1. 画像を開く
  2. [ファイル] -> [Web 用に保存...] (以前のバージョンでは [Web およびデバイス用に保存]) をクリックします。
  3. 開いたダイアログの右上で、「JPEG」形式を選択します
  4. いくつかのオプションが表示されます。[プログレッシブ] を選択します。
  5. 保存

このオプションを使用すると、ファイルのサイズがわずかに大きくなりますが、ブラウザーには画像が読み込まれると表示されます。

于 2013-11-12T08:39:57.437 に答える
0

あなたの質問は、私のために働く解決策を発見した私の質問と非常に似ています。ただし、プログレッシブオプションを有効にして保存されている画像に依存しているとコメント者が示唆しているため、それが機能するかどうかは不明です.

私の場合、最初のイメージはロードされると常に表示されたので、私のソリューションはそれを利用しているように見えました。あなたの場合、最初に大きなファイルを最初にテストケースとしてロードし、それがダウンロードされたように見えた場合、私のソリューションもうまくいくと思います。

于 2015-10-02T06:28:39.453 に答える
0

代わりに、画像属性「タイトル」または「alt」値を「読み込み中....」として追加できます

画像がロードされようとしている場合、タイトルまたは代替プロパティがユーザーに表示されます。

Javascript を使用して画像をロードした後、alt または title の値を変更できます。

これは基本的な解決策です。適切な解決策が見つかるまで使用できます。

于 2013-11-20T13:44:25.027 に答える