ホームページ  >  記事  >  ウェブフロントエンド  >  イメージが読み込まれた後にイベントを実行する

イメージが読み込まれた後にイベントを実行する

小云云
小云云オリジナル
2018-01-18 14:49:022080ブラウズ

この記事では、主に画像の読み込みと実行イベントの例を紹介します。非常に参考になるので、皆さんのお役に立てれば幸いです。 。

例は次のとおりです:

//图片加载
function load(imgSrc,callback) {
 var imgs = [];
 var c = 0;
 for (var i = 0; i < imgSrc.length; i++) {
  imgs[i] = new Image();
  imgs[i].src = imgSrc[i];
  imgs[i].onload = function(){
   c++
   if(c == imgSrc.length){
    if(callback){
     callback();
    }
   }
  }
 }
 return imgs;
}

アプリケーションシナリオ: 大量の画像を含む一部のページ、進行状況バーや読み取りパーセントなどの読み込み効果を追加する必要がある一部のページ、一般にモバイル ページの方がよく使用されます

関連する推奨事項:

背景画像が読み込まれない問題の解決方法

2つのエフェクトのJS画像読み込みサンプルコード

ぼかしから鮮明な表示までの画像読み込みを実現するJavaScriptメソッド

以上がイメージが読み込まれた後にイベントを実行するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。