js イメージ読み込みの 2 つの効果のコード例-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js イメージ読み込みの 2 つの効果のコード例

零下一度

May 15, 2017 am 09:47 AM

この記事では、主に js 画像読み込みエフェクトのサンプルコード (遅延読み込み + ウォーターフォール読み込み) を紹介します。これは、必要な友達は参照してください

主に 2 種類の画像読み込みエフェクトを実行します

。 1 つは、ページ上に多くの画像がある場合に読み取りバー効果を備えた読み込みプロンプトを提供することです (正しく読み込まれていることを確認するために、1 秒の読み込み間隔が設定されています)

もう 1 つは、位置に基づいて画像を読み込むことですスライダーのプリロードにより、ユーザーが気付かないうちにウォーターフォールローディング効果が得られます

遅延ロード

主なアイデア:

正しいアドレスは HTML の img タグに保存されますsrc 属性を使用して、すべての画像の背景として循環する読み込み画像を設定します。js で各画像を順番に読み取り、src 内のアドレスを src に置き換え、画像が正常に読み込まれるたびに背景を削除します。進行状況バーもそれに応じて変化します。
読み込みが失敗した場合は、画像読み込みエラーが表示されます。

HTML の構造は非常にシンプルで、すべての img をラップする p.picList に、単純なプログレスバー p#loadBar

<body>
  <p class="picList">
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList1.jg"    alt="js イメージ読み込みの 2 つの効果のコード例" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList2.jpg"    alt="js イメージ読み込みの 2 つの効果のコード例" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList3.jpg"    alt="js イメージ読み込みの 2 つの効果のコード例" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList4.jpg"    alt="js イメージ読み込みの 2 つの効果のコード例" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList5.jpg"    alt="js イメージ読み込みの 2 つの効果のコード例" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList6.jpg"    alt="js イメージ読み込みの 2 つの効果のコード例" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList7.jpg"    alt="js イメージ読み込みの 2 つの効果のコード例" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList8.jpg"    alt="js イメージ読み込みの 2 つの効果のコード例" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList9.jpg"    alt="js イメージ読み込みの 2 つの効果のコード例" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList10.jpg"    alt="js イメージ読み込みの 2 つの効果のコード例" >
  </p>

  <p id="loadBar">
    <p id="loadBarMask"></p>
  </p>
</body>

.picList{
  img{
    width: 100px;
    height: 100px;
    position: relative;

    /*加载失败时显示灰底文字*/
    &:after{
      content: "( ⊙ o ⊙ )加载失败";
      font-size: 6px;
      font-family: FontAwesome;
      color: rgb(100, 100, 100);
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: #ddd;
    }
  }
}

.lazy{
  background: url(../pic/loading.gif) center no-repeat;
  border: 1px solid black;
}

#loadBar{
  width: 200px;
  height: 15px;
  background: linear-gradient(90deg,#187103,#81b50b,#187103);
  border: 10px solid white;

  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -100px;

  #loadBarMask{
    width: 70%;//这个数值显示没有加载成功的图片
    height: 100%;
    background-color: beige;
    position: absolute;
    right: 0;
  }
}

CSS で注意すべき点は 2 つあります:

1 つは、画像の読み込みに失敗したときに表示される灰色の背景のテキストを img の after

疑似クラス

に置くことです。 , gif画像を追加すると背景が削除され、この部分の内容とスタイルが表示されます。

js部分(loadPicPerSecond()を直接実行するだけ)

var lazyPic = $(&#39;img.lazy&#39;);
var loadBarMask = $(&#39;#loadBarMask&#39;);
var picList = $(&#39;.picList&#39;);

var activePic = 0;
var totalPic = lazyPic.length;

/*每秒加载一张图片*/

function loadPicPerSecond(){

  lazyPic.each(function(index){

    var self = $(this);

    //console.log(self[0].complete);
    /*img标签已经事先写在html中，所以此时的complete状态全部都是true*/

    setTimeout(function(){

      src[index] = self.attr(&#39;src&#39;);
      self.attr(&#39;src&#39;,src[index]);
      self.removeClass(&#39;lazy&#39;);

      //图片获得正确src地址之后，可以执行下面的onload操作
      self[0].onload = function(){

        //加载读条loadBar动画
        countPic();
      }

      //图片获得的src地址不正确时，执行下面的onerror操作
      self[0].onerror = function(){
        /*this.style.background = &#39;url(pic/compressed/picList18.jpg) center no-repeat&#39;;*/
        countPic();
      }

    },1000*index);

  })

}

/*根据onload的执行情况来计算当前的图片加载进度.每onload一次，activePic就增加1*/

function countPic(){

  activePic++;

  var leftPic = totalPic - activePic;
  var percentPic = Math.ceil(leftPic/totalPic*100);//没有加载的图片百分比，和loadBarMask的宽度占比配合

  console.log("已加载"+(100-percentPic)+"%");

  loadBarMask.css("width",percentPic+"%");

  if(percentPic==0){
    $(&#39;#loadBar&#39;).hide();
  }
}

2番目のウォーターフォール読み込み

メインアイデア:

ロードされた画像の最後の画像が表示されたとき、ウィンドウのスクロール状況を監視するウィンドウに入ろうとしているときは、次の画像の読み込みを開始します。

すべての画像アドレスが

json

HTMLは前と同じで、srcを通常のアドレスとして書くだけです。 CSSも全く同じです。

var lazyPic = $(&#39;img.lazy&#39;);
var loadBarMask = $(&#39;#loadBarMask&#39;);
var picList = $(&#39;.picList&#39;);

var scrollTop,
  clientHeight,
  scrollHeight;

var threshold = 200; //最后一张图片距离窗口200px的时候开始加载图片

var src = [];

var activePic = 0;
var totalPic = lazyPic.length;

//待加载的图片数据
var dirtSrc = "pic/compressed/picList";
var picData = {imgSrc:[
  dirtSrc + "20.jpg",
  dirtSrc + "21.jpg",
  dirtSrc + "22.jpg",
  dirtSrc + "23.jpg",
  dirtSrc + "24.jpg",
  dirtSrc + "25.jpg",
  dirtSrc + "26.jpg",
  dirtSrc + "27.jpg",
  dirtSrc + "28.jpg",
  dirtSrc + "29.jpg",
  dirtSrc + "30.jpg",
  dirtSrc + "31.jpg",
  dirtSrc + "32.jpg",
  dirtSrc + "33.jpg",
  dirtSrc + "34.jpg",
  dirtSrc + "35.jpg",
  dirtSrc + "36.jpg",
  dirtSrc + "37.jpg",
  dirtSrc + "38.jpg",
  dirtSrc + "39.jpg",
  dirtSrc + "40.jpg",
  dirtSrc + "41.jpg",
  dirtSrc + "42.jpg",
  dirtSrc + "43.jpg",
  dirtSrc + "44.jpg",
  dirtSrc + "45.jpg",
  dirtSrc + "46.jpg",
  dirtSrc + "47.jpg",
  dirtSrc + "48.jpg",
  dirtSrc + "49.jpg",
]};

//加载次数计数器
var scrollIndex = 0;

$(function(){

  /*监听窗口滚动情况*/
  $(window).on(&#39;scroll&#39;,function(){

    scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
    clientHeight = $(window).height();
    scrollHeight = picList.last().height();//picList.last()[0].clientHeight

    /*目标与窗口的距离达到阈值时开始加载*/
    if(scrollHeight-clientHeight-scrollTop < threshold){
      scrollPic(10);
    }
  })
})

/*根据滚动程度加载图片，每次加载perAmount张*/

function scrollPic(perAmount = 10){

  var totalAmount = perAmount * (scrollIndex+1);

   //考虑到最后一次加载的时候，剩余的图片数量有可能达不到限定的每次加载的数量，这时候需要更改totalAmount的值
  if(totalAmount>picData.imgSrc.length){
    totalAmount = picData.imgSrc.length;
  }
  for(scrollIndex;scrollIndex<totalAmount;scrollIndex++){
    var oimg = new Image();
    oimg.src = picData.imgSrc[scrollIndex];
    picList.append(oimg);
  }

}

最も緊急なのはscrollTopと

objects

jquery

に従って書き留めました。直接将来的に。数値関係を把握した後は、条件が満たされている限りローディングをトリガーできます。

【関連推奨事項】

1. 特別な推奨事項

「php Programmer Toolbox」V0.1バージョンのダウンロード

3 php.cn Dugu Jiijian (3) - JavaScript ビデオチュートリアル

以上がjs イメージ読み込みの 2 つの効果のコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles