再谈javascript图片预加载技术(详细演示)

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类效果在图片加载过程中就能正确居中显示，提升了用户体验。同时，这种方法还优化了性能，避免了不必要的等待时间，使得图片预加载更加高效。