onshow详解

发布时间：2023-05-20

一、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 < imgs.length; i++) {
    if(isInView(imgs[i])) {
      imgs[i].src = imgs[i].getAttribute('data-src');
      imgs[i].removeAttribute('data-src');
    }
  }
}
function isInView(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 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 < window.innerHeight && rect.bottom >= 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 < window.innerHeight && rect1.bottom >= 0) {
    // 图表1进入可见区域，加载图表1
    loadChart1();
  }
  if(rect2.top < window.innerHeight && rect2.bottom >= 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事件来延迟加载图表。当图表进入可见区域时，才把它们加载到页面中，以提升页面性能。

推荐文章