js使用圖片載入技術實現圖片切換

阿新 • • 發佈：2020-12-17

技術標籤：js

js使用圖片載入技術實現圖片切換

1.功能實現
點選“上一張”按鈕，切換上一張圖片，點選“下一張”按鈕，切換至下一張，到達圖片末尾會彈出相應提示框，通過Image物件來預載入圖片。

2.程式碼如下


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" 
>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>圖片切換</title>
  </head>
  <body>
 <img src="img/1.jpg" id="img1" style="width: 200px;height: 200;">
 <br>
  <input type="button" 
 value="上一張" onclick="change(0);">  
  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;
  <input type="button" value="下一張" onclick="change(1);"> 
  </body>

  <script>
    //圖片預載入技術，緩衝四張圖片 

    var imgObj1 = new Image();
    imgObj1.src = "/img/1.jpg";
    var imgObj2 = new Image();
    imgObj2.src = "/img/2.jpg";
    var imgObj3 = new Image();
    imgObj3.src = "/img/3.jpg";
    var imgObj4 = new Image();
    imgObj4.src = "/img/4.jpg";
    var i = 2;
    //將緩衝物件放入陣列
    var imgArr=[imgObj1,imgObj2,imgObj3,imgObj4];
    //點選觸發事件
    function change(num){
     if (i==1&&num==0){
       alert('當前為第一張圖片');
       return;//返回
     }else if(i==4&&num==1){
      alert('當前為最後一張圖片');
      return;
     }
     if(num==0){//上一張，i--
       i--;
     }else{//下一張，i++
       i++;
     }
     document.getElementById("img1").src=imgArr[i - 1].src;//顯示相應圖片
    }
  </script>
</html>

3.執行效果如下
在這裡插入圖片描述

js使用圖片載入技術實現圖片切換

技術標籤：js js使用圖片載入技術實現圖片切換 1.功能實現點選“上一張”按鈕，切換上一張圖片，點選“下一張”按鈕，切換至下一張，到達圖片末尾會彈出相應提示框，通過Image物件來預載入圖片。

JS圖片懶載入技術實現過程解析

懶載入技術懶載入（LazyLoad）是前端優化的一種有效方式，極大的提升使用者體驗，圖片一直是頁面載入的流浪大戶，現在一張圖片幾兆已經是很正常的事，遠遠大於程式碼的大小。

vue+js點選箭頭實現圖片切換

本文例項為大家分享了+點選箭頭實現圖片切換的具體程式碼，供大家參考，具體內容如下

JS元件庫AlloyTouch實現圖片輪播元件過程解析

輪播圖也涉及到觸控和觸控反饋，同時，AlloyTouch可以把慣性運動開啟或者關閉，並且設定min和max為運動區域，超出會自動回彈。

JS實現圖片懶載入(lazyload)過程詳解

對於圖片較多的頁面，使用懶載入可以大幅提高頁面載入速度，提高使用者體驗。

Js實現圖片的懶載入

　　在有些時候，我們在前端載入的圖片就很多，例如商城之類的網站，圖片就很多，那麼，我們一次性載入所有的圖片的肯定會影響效能，而且會佔用寬頻

js實現輪播圖效果純js實現圖片自動切換

本文例項為大家分享了純js實現圖片自動切換的具體程式碼，供大家參考，具體內容如下

js實現圖片懶載入原理

有時候一個網頁會包含很多的圖片，例如淘寶京東這些購物網站，商品圖片多隻之又多，頁面圖片多，載入的圖片就多。伺服器壓力就會很大。不僅影響渲染速度還會浪費頻寬。比如一個1M大小的圖片，併發情況下，達到1000併

js 圖片懶載入的實現

1.使用場景　　當網頁上有大量圖片需要載入時，如果一次性將圖片全部載入完，網頁載入時間會過長；

用原生JS實現圖片懶載入

技術標籤：JSjavascript 之前專案都是使用現成的lazyLoad之類的懶載入外掛，趁專案沒那麼趕的時候自己試著實現一下。

原生js實現圖片懶載入

此文轉載自：https://blog.csdn.net/Liang_nm/article/details/111769010#commentBox 首先，先講講什麼叫圖片懶載入吧，當開啟一個有很多圖片的頁面時，先只加載頁面上看到的圖片，等滾動到頁面下面時，再載入所

js 實現圖片懶載入

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

js實現滑鼠切換圖片（無定時器）

本文例項為大家分享了js實現滑鼠切換圖片的具體程式碼，供大家參考，具體內容如下

原生JS實現圖片懶載入（考慮不重複載入以及節流）

1.原生JS實現圖片懶載入（考慮不重複載入以及節流）知識點：視口位置判斷，懶載入實現（data-set），節流等

Vue.js實現圖片切換功能

本文例項為大家分享了vue.js實現圖片切換功能的具體程式碼，供大家參考，具體內容如下

js點選按鈕實現多張圖片迴圈切換

本文例項為大家分享了點選按鈕實現多張圖片迴圈切換的具體程式碼，供大家參考，具體內容如下

Python爬蟲圖片懶載入技術 selenium和PhantomJS解析

一.什麼是圖片懶載入？ - 案例分析：抓取站長素材http://sc.chinaz.com/中的圖片資料

ES6實現圖片切換特效程式碼

效果圖 demo.html <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

js實現圖片實時時鐘

本文例項為大家分享了js實現圖片實時時鐘的具體程式碼，供大家參考，具體內容如下

js實現圖片上傳到伺服器和回顯

關於js實現圖片的上傳和回顯，曾經使用者的程式碼粘在這裡：樣式：這樣寫樣式的道理是給<input>標籤的父級設定一個背景圖，就是‘+\'那個背景圖，然後把<input>的寬高設定得跟父級一樣，且完全透明（注