使用原生JavaScript实现高效图片弹窗

"这篇文章主要介绍了如何使用原生JavaScript实现图片弹窗交互效果，涉及变量声明、DOM事件优化和图片加载处理等关键知识点。" 在实现图片弹窗交互效果的过程中，有以下几个重要的JavaScript技术点： 1. 高效声明变量： 在描述中提到，使用`var`声明多个变量比单独为每个变量声明`var`更为高效。这是因为在JavaScript中，多次使用`var`关键字声明变量实际上会在作用域内创建相同的变量，而不是创建新的变量实例。例如： ```javascript var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop, sWindow_h = document.documentElement.clientHeight, t_h = parseInt(this.getCss(this.getId('gy_photoBox_head'), 'height')), hold_h = sWindow_h - t_h - 20, width = this.nImgWidth, height = this.nImgHeight; ``` 这种方式可以减少代码量，提高可读性，并且避免了不必要的重复。 2. DOM事件优化： 当涉及到窗口的`onresize`事件时，频繁调用可能导致性能问题。为了解决这个问题，可以使用函数节流（Throttling）技术。在代码中，创建了一个定时器`_timer`，当窗口大小改变时，清空当前的定时器，然后设置一个新的定时器来延迟执行事件处理函数。这样可以确保事件处理函数不会过于频繁地执行，只有在一段时间内没有更多窗口大小变化时才会执行： ```javascript windowResize: function() { var _that = this, _timer = null; // 函数节流 window.onresize = function() { clearTimeout(_timer); _timer = setTimeout(function() { if (_that.tools.getId('gy_photoBox')) { _that.setBoxCss(); } }, 100); } } ``` 3. 图片加载处理： 实现图片弹窗时，需要处理图片的加载状态，包括成功和失败的情况。这里提供了一个图片加载的函数，它创建了一个新的`Image`对象，并监听其`onload`和`onerror`事件： ```javascript imgLoading: function(opt) { var _img = new Image(), _that = this; _img.onload = function() { _that.nImgWidth = this.width; _that.nImgHeight = this.height; if (typeof opt.success === 'function') { setTimeout(function() { opt.success(); }, 300); } }; _img.onerror = function() { if (opt.error) { opt.error(); } }; // 注意：onload事件的回调中设置图片源，确保在事件触发前加载 _img.src = opt.src; } ``` 这个函数接受一个配置对象，包含了图片地址（`src`）、加载成功回调（`success`）和加载失败回调（`error`）。当图片加载成功时，会更新图片的宽度和高度，并在300毫秒后执行成功的回调；加载失败时，如果提供了错误回调，则会执行这个回调。 通过以上这些技术，我们可以构建一个高效的图片弹窗交互系统，既能保证用户体验，又能有效地处理浏览器的性能问题。