画像の読み込みステータスを判断し、エフェクトの読み込み率を達成します

はじめに

一部の大きな外部リソースにより、ページの読み込みが遅くなります。このとき、通常、ここで実装されているのは、画像の読み込みの進行状況のパーセンテージに基づいた読み込み効果です。画像読み込みのステータス

1. onload onerror

画像が正常に読み込まれた後、画像アドレスが再度要求される限り、onload イベントがトリガーされるため、このメソッドを使用することをお勧めします。 、イメージのロードに失敗すると onload イベントがトリガーされ、onerror イベントがトリガーされます。このメソッドは互換性が高く、お勧めです

2. imgObj.onreadystatechange

一部のブラウザではこのメソッドがサポートされており、readState === ‘complete’により、画像が読み込まれているかどうかを判断できます。

テスト済み:

Chrome と Firefox ではこのイベントがトリガーされません

IE Edge バージョンではこのイベントがトリガーされません

IE 10 9 より低いバージョンではこのイベントがトリガーされません

そのためお勧めできません

3 . imgObj.complete

complete 属性は、画像が読み込まれているかどうかを判断できます。ただし、ブラウザによって完了の処理が異なります。

画像リソースが正常であれば、すべてのブラウザは false から true まで正常に読み込みますが、画像リソースが異常な場合、画像の読み込みは失敗します。読み込み失敗後は false から true に変わりますが、IE は常に false になります

ので、この方法はお勧めできません。

画像リソースの読み込み進捗状況

単一の画像リソースが読み込まれているかどうかを判断でき、ページ全体のすべての画像リソースの読み込み進捗状況を簡単に計算できます。

document.addEventListener('DOMContentLoaded', function(){
      var imgs = document.querySelectorAll('img'), //所有图片资源
          show = 0, //百分比
          num = 0; //加载完成的个数
      var all = imgs.length;
      [].slice.call(imgs).forEach(function(element,index){
         //不管是否加载成功，都num+1
        element.addEventListener('load',function(){
          num++;
          show = Math.floor(100*num/all);

        })

        element.addEventListener('error',function(){
          num++;
          show = Math.floor(100*num/all);
        })
      })
    })

ページが読み込まれたら、よりフレンドリーな読み込み効果を実現するためにマスクを非表示にしてください

    window.onload = function(){
      document.querySelector('.mask').classList.add('hide');
    }

以上が画像の読み込みステータスを判断し、エフェクトの読み込み率を達成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。