1

ファイルがロードされている間に、JSP ファイルにプログレス バーを挿入しようとしています (その時点までダウンロードされたファイルの量を表示する必要はありません。ページがロードを待機していることを示すだけで済みます)。読み込まれました。私はこのサイトを作成し、プログレスバーとなる .git を見てきました。

http://preloaders.net/

これを使用してSpringサーバーから画像を取得しています：

<img class="ImgMapa" alt="${andar.caminhoImagem}" src="UploadServlet?getfile=${andar.nomeImagem}" />

リンクをクリックすると、この画像がサーバーから取得されます。

<a href="#${andar.numero}" class="btn btn-primary" data-toggle="tab">${andar.numero}º Andar</a>

画像が jQuery を介して完全にダウンロードされたことを知るにはどうすればよいですか? このようにして、進行状況バーの GIF を表示し、画像が読み込まれると非表示にすることができます。

それを行うより良い方法はありますか？そうでない場合、このアイデアを使用して、画像のダウンロード中にGIFを表示するにはどうすればよいですか?

編集：

これは私が画像を取得する方法です:

    @RequestMapping("UploadServlet")
        public void doGet(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
if (request.getParameter("getfile") != null
                    && !request.getParameter("getfile").isEmpty()) {
                File file = new File(request.getServletContext().getRealPath("/")
                        + "resources/imgs/" + request.getParameter("getfile"));
                if (file.exists()) {
                    int bytes = 0;
                    ServletOutputStream op = response.getOutputStream();

                    response.setContentType(getMimeType(file));
                    response.setContentLength((int) file.length());
                    response.setHeader("Content-Disposition", "inline; filename=\""
                            + file.getName() + "\"");

                    byte[] bbuf = new byte[1024];
                    DataInputStream in = new DataInputStream(new FileInputStream(
                            file));

                    while ((in != null) && ((bytes = in.read(bbuf)) != -1)) {
                        op.write(bbuf, 0, bytes);
                    }

                    in.close();
                    op.flush();
                    op.close();
                }
            }
4

1 に答える 1

0

おそらく、進行状況バーは次のようになります。

<img id="progressBar" style="display:none;" src="...../loading.gif">

それで

jQuery(function () {
    $('a.btn-primary').click(function () {
        $('#progressBar').show();
    });
    $('img.ImgMapa').load(function () {
        $('#progressBar').hide();
    });
});

使用している jQuery のバージョンはわかりませんが、.load()最近廃止されました。

したがって、最新バージョンの場合：

$('img.ImgMapa').on('load',function () {
    $('#progressBar').hide();
});

これを試してください。おそらくノードはページの初期化に存在しません

$(document).on('load','img.ImgMapa', function () {
   $('#progressBar').hide();
});

documentパフォーマンスを向上させるために、イメージの選択可能な最も近い親に置き換えることができます。

于 2013-03-09T01:21:19.437 に答える