javascript - 複数 - jquery 背景画像 読み込み 完了




window.stop()を使わずにimage<img>ロードリクエストを中止するにはどうすればいいですか? (5)

  1. スタックを使用してajaxリクエストを管理する(並列ではなくシリアル読み込みを行うことを意味するが、それは価値がある)

  2. スクロール停止時には、300ms待機してから、ビュー領域内のすべての画像をスタックに押し込みます

  3. ユーザーがスクロールするたびに、スタックが実行中かどうかをチェックします。 (fyi - すべてのajax呼び出しを強制終了するのではなく、特定のurlへのすべてのリクエストを停止することができます。regexを使うこともできます。

  4. 既存のスタックが実行されている場合 - 一番上のものを除いて、その中にあるすべてのイメージをポップします。

  5. すべてのajax呼び出しで - スタックからその特定のイメージを削除するためのbeforeSend()イベントをバインドする

今は遅いですが、作業中に非常に似たようなことをしました。詳細なコードが必要な場合は、私に知らせてください。

乾杯!

私は、ユーザーがスクロールしながら画像を動的に読み込む非常に長いページを持っています。

ただし、ユーザーがページの特定の部分からすばやくスクロールすると、ページの非表示部分で画像が読み込まれ続けることはありません。

ページには画像読み込みとは別に多くのリクエストが同時に発生しますので、スクロールイベントでの鈍いwindow.stop()の呼び出しは受け入れられません。

私は、もはや表示されていないイメージのimg src属性を削除してクリアしようとしましたが、リクエストが既に開始されているので、イメージはロードし続けます。

ユーザーがページのその部分を過ぎてスクロールすると、イメージsrcが埋められたことに注意してください。 一度それを過ぎると、window.stop()を使わずにイメージの読み込みを停止することができませんでした。 srcをクリアしても機能しませんでした。 (Chrome&FF)

私が見つけた同様の記事は近づくが、この問題を解決していないようだ。


BTW、別の考えが働くかもしれない:

1)新しいiframeを作成する

2)iframeの内部にイメージのロードを開始するスクリプトがあり、ロードされ.parent.parentのメソッドを呼び出します

3)必要に応じてiframeオブジェクトの.stopを使用してiframeコンテンツの読み込みを停止する


その解決策はウェブワーカーである可能性があります。 ウェブワーカーは終了することができ、彼との接続も可能です。 しかし、Webワーカーがブラウザの限られた接続を使用するため、アプリケーションがブロックされるという小さな問題があります。

今私はserviceWorkersのソリューションに取り組んでいます - 彼らは接続制限がありません(私はそう望みます)


たぶん、あなたは、データベースのフィールドをチェックするPHPスクリプト(またはより良いまだmemcached)を介してイメージを提供することができますが、ロードを停止することを示しています。 スクリプトはイメージをチャンクに分割し、各チャンクの間で一時停止し、特定のリクエストの停止フラグがあるかどうかをチェックします。 それが設定されていれば、A 204の内容のないヘッダーを送信します。ブラウザが取得すると直ちに受信を停止します。

しかしこれはちょっと怪しいかもしれない。


あなたがしようとしているのは、 nrabinowitz述べたように間違ったアプローチnrabinowitz 。 イメージの読み込みプロセスを単にキャンセルすることはできません( src属性を空の文字列に設定することは良い考えではありません )。 実際には、たとえ可能であったとしても、サーバーが絶えずキャンセルされるデータを送信し、負荷率を高め、速度を遅くするため、これを行うと状況が最悪になります。 また、これを考慮してください:

  1. ユーザーがページを狂って上下にスクロールすると、読み込みの遅延が予想されます。
  2. ページの一部を読み込む前にタイムアウト遅延(例:200ミリ秒)があり、ページ上で200ミリ秒後に何回停止してジャンプしますか? それが起こっても、ポイント1に戻ります
  3. あなたのイメージはどれくらい大きいですか? 遅いサーバーでも、毎秒数十万回のThunbnailsを処理できます。 あなたのサイトがより大きな画像を持っているなら、 lightBoxようないくつかのコンポーネントで低解像度画像と高解像度画像を使用することを検討してlightBox

多くの場合、コンピュータの問題は単なる設計上の問題です。

** 編集 **

ここにアイデアがあります:

  1. あなたのページには、予想されるイメージサイズの幅と高さを持つDIVコンテナが表示されます(CSSを使用してスタイルを設定)。 各DIV内部にリンクを追加します。 例えば ​​:

    <div class="img-wrapper thumbnail">
       <a href="http://www.domain.com/path/to/image">Loading...</a>
    </div>
    
  2. このJavascriptを追加してください(テストされていない、アイデアは自己説明的です)

    $(function() {
    
    var imgStack;
    var loadTimeout;
    
    $(window).scroll(function() {
       imgStack = null;
       if (loadTimeout) clearTimeout(loadTimeout);
    
       loadTimeout = setTimeout(function() {
    
          // get all links visible in the view port
          // should be an array or jQuery object
          imgStack = ...
    
          loadNextImage();
       }, 200);                // 200 ms delay
    });
    
    function loadNextImage() {
       if (imgStack && imgStack.length) {
          var nextLink = $(imgStack.pop());   // get next image element
    
          $('<img />').attr('src', nextLink.attr('href'))
            .appendTo(nextLink.parent())
            .load(function() {
               loadNextImage();
            });
    
          // remove link from container (so we don't precess it twice)
          nextLink.remove();
       }
    };
    
    });
    






image