onshow詳解

一、onshow是什麼事件

onshow是一個javascript事件，用於在元素可見時觸發。它常常與DOM操作、AJAX、設置定時器等其他技術結合使用，以在元素可見時觸發相應的操作。

在移動端，當用戶重新回到應用程序時，onshow事件也會被觸發。因此，在移動端開發中，onshow事件是非常有用的。

二、on the show

onshow事件常用於處理從一個頁面返回另一個頁面而導致的數據同步問題。例如，在一個購物車頁面中，如果用戶在商品詳情頁面中添加了商品，那麼在返回購物車頁面時，購物車頁面需要更新用戶添加的商品；這種情況下就可以使用onshow事件。下面是一個簡單的示例：

  // 商品詳情頁面
  function addProductToCart(product) {
    localStorage.setItem('cart', JSON.stringify(product));
  }
  
  // 購物車頁面
  var cartEl = document.querySelector('.cart');
  
  function updateCart() {
    var cart = JSON.parse(localStorage.getItem('cart'));
    cartEl.innerHTML = '您購買的商品是：' + cart.name;
  }
  
  updateCart(); // 初始化購物車
  window.addEventListener('storage', function(event) {
    if (event.key === 'cart') {
      updateCart();
    }
  });
  
  window.addEventListener('pageshow', function(event) {
    updateCart();
  });

在這個例子中，我們通過localstorage來保存用戶添加的商品信息，然後在購物車頁面中通過onshow和storage事件來更新購物車頁面中的商品信息。

三、show

onshow事件還可以用於實現圖片或其他資源的延遲加載功能。例如在一個頁面中，如果有一些圖片和其他資源是不必要立刻加載的，那麼就可以設置這些圖片和資源的data-src屬性，然後在onshow事件觸發的時候再去加載這些資源。

下面是一個簡單的示例：

  var lazyLoadEl = document.querySelector('.lazy-load');
  
  function lazyLoad() {
    var imgs = document.querySelectorAll('[data-src]');
    for(var i = 0; i = 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  
  window.addEventListener('load', lazyLoad);
  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
  window.addEventListener('orientationChange', lazyLoad);
  window.addEventListener('pageshow', lazyLoad);

在這個例子中，我們通過isInView函數來判斷圖片是否在可見範圍內，然後在onshow事件觸發的時候調用lazyLoad函數來加載圖片。

四、on show

onshow事件還可以用於實現一些簡單的動畫效果。例如，在一個頁面中，如果有一些元素需要在進入可見區域時，產生動畫效果，那麼就可以使用onshow事件。

下面是一個簡單的示例：

  var animateEl = document.querySelector('.animate');
  
  function animate() {
    var rect = animateEl.getBoundingClientRect();
    if(rect.top = 0) {

      // 添加動畫樣式
      animateEl.classList.add('animated');
    } else {

      // 移除動畫樣式
      animateEl.classList.remove('animated');
    }
  }
  
  window.addEventListener('scroll', animate);
  window.addEventListener('resize', animate);
  window.addEventListener('orientationChange', animate);
  window.addEventListener('pageshow', animate);

在這個例子中，我們通過onshow事件來實現動畫的添加和移除。通過監聽scroll、resize、orientationChange等事件，來實時更新動畫的狀態。

五、on display

onshow事件也可以用於實現一些高級功能，例如，在一個頁面中有多個圖表、表格、側邊欄等元素，用戶可能只會關注其中的部分元素。那麼，我們就可以通過onshow事件來延遲加載這些不必要的元素，以提升頁面性能。

下面是一個簡單的示例：

  var chart1El = document.querySelector('.chart-1');
  var chart2El = document.querySelector('.chart-2');
  
  function lazyLoadChart() {
    var rect1 = chart1El.getBoundingClientRect();
    var rect2 = chart2El.getBoundingClientRect();
    if(rect1.top = 0) {

      // 圖表1進入可見區域，加載圖表1
      loadChart1();
    }
    if(rect2.top = 0) {

      // 圖表2進入可見區域，加載圖表2
      loadChart2();
    }
  }
  
  function loadChart1() {
    var data = [1, 2, 3, 4, 5];
    var chart = new Chart(chart1El, {
      type: 'line',
      data: {
        labels: ['1', '2', '3', '4', '5'],
        datasets: [{
          label: 'Data',
          data: data,
          borderColor: '#000',
          fill: false
        }]
      }
    });
  }
  
  function loadChart2() {
    var data = [1, 2, 3, 4, 5];
    var chart = new Chart(chart2El, {
      type: 'bar',
      data: {
        labels: ['1', '2', '3', '4', '5'],
        datasets: [{
          label: 'Data',
          data: data,
          borderColor: '#000',
          backgroundColor: 'rgba(0, 0, 0, 0.2)'
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  }
  
  window.addEventListener('load', lazyLoadChart);
  window.addEventListener('scroll', lazyLoadChart);
  window.addEventListener('resize', lazyLoadChart);
  window.addEventListener('orientationChange', lazyLoadChart);
  window.addEventListener('pageshow', lazyLoadChart);

在這個例子中，我們通過onshow事件來延遲加載圖表。當圖表進入可見區域時，才把它們加載到頁面中，以提升頁面性能。