JavaScript图片预加载技术是网页开发中的一个重要技巧，尤其对于那些依赖大图或者多图展示的网站，如Lightbox效果，可以显著提升用户体验。由于JavaScript在处理图片时无法直接获取到图片文件头的数据，这意味着在图片实际加载完成之前，无法知道图片的真实尺寸。这导致了在实现如Lightbox这样的图片放大效果时，图片需要完全加载后才能进行居中等布局调整，从而影响了用户体验，因为用户可能需要等待较长的时间才能看到完整的图片。
预加载技术的核心目标是提前获取图片的尺寸信息，以便在图片尚未完全加载时就开始进行布局计算。这可以通过创建新的`Image`对象来实现，将图片URL赋值给`src`属性，然后监听`onload`事件。一旦图片加载完成，`onload`事件会被触发，此时可以通过`img.width`和`img.height`获取到图片尺寸。然而，这种做法的缺点在于，它仍然需要等待图片完整加载，因此速度上并不理想。
为了提高效率，我们可以利用浏览器在加载图片时会预先解析文件头数据的特点。通过创建一个隐藏的`div`元素，将`img`对象插入其中，即使图片未完全加载，浏览器也会为图片预留出相应空间。这样我们就可以通过定时检测`img.offsetWidth`和`img.offsetHeight`来判断图片是否已经开始加载并占位。
以下是一个简单的预加载图片尺寸的实现：
```javascript
// 图片头数据加载就绪事件
// @param {String} 图片路径
// @param {Function} 获取尺寸的回调函数 (参数1接收width；参数2接收height)
// @param {Function} 加载错误的回调函数 (可选)
(function () {
var list = [], intervalId = null, tick = function () {
// 遍历列表并检查图片尺寸
}, stop = function () {
clearInterval(intervalId);
intervalId = null;
};
this.imgReady = function (url, callback, error) {
var check, end, width, height, offsetWidth, offsetHeight, div, accuracy = 1024, doc = document, container = doc.body || doc.getElementsByTagName('head')[0], img = new Image();
img.src = url;
if (!callback) return img;
if (img.complete) return callback(img.width, img.height);
div = doc.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img);
container.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;
img.onload = function () {
end();
callback(img.width, img.height);
};
img.onerror = function () {
end();
error && error();
};
// 检测图片是否已经占位
check = function () {
// 在这里添加检测图片尺寸变化的逻辑
};
};
})();
```
这个`imgReady`函数首先创建了一个`Image`对象并设置其`src`属性，然后将图片插入到一个隐藏的`div`中。通过定时器`tick`来检查图片尺寸，一旦尺寸发生变化，表明图片开始加载，可以调用回调函数返回当前尺寸。当图片完全加载时，`onload`事件触发，这时会停止定时器并返回最终尺寸。如果图片加载失败，`onerror`事件会被触发，执行错误回调。
通过这种方法，我们可以在图片加载的早期阶段获取到尺寸信息，从而提前进行布局计算，使得Lightbox类效果在图片加载过程中就能正确居中显示，提升了用户体验。同时，这种方法还优化了性能，避免了不必要的等待时间，使得图片预加载更加高效。
