JavaScript实现图片预加载，有清除缓存功能

发布时间：2018-08-21 01:40:05 所属栏目：Asp教程来源：站长网

导读：Java Script实现图片预加载，有清除缓存功能。如lightbox方式展现照片，无疑需要提前获得大图的尺寸，这样才能居中定位，由于javascript无法获取img文件头数据，必须等待其加载完毕后才能获取真实的大小然后展示出来，所以lightbox显示的图片的速度体验要

　　JavaScript实现图片预加载，有清除缓存功能。如lightbox方式展现照片，无疑需要提前获得大图的尺寸，这样才能居中定位，由于javascript无法获取img文件头数据，必须等待其加载完毕后才能获取真实的大小然后展示出来，所以lightbox显示的图片的速度体验要比直接输出的差很多，而本文说提到的预加载技术主要针对获取图片尺寸。

　　示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>图片预加载</title> <script> var imgReady = function (url, callback, error) { var width, height, intervalId, check, div, img = new Image(), body = document.body; img.src = url; // 从缓存中读取 if (img.complete) { return callback(img.width, img.height); }; // 通过占位提前获取图片头部数据 if (body) { div = document.createElement('div'); div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden'; div.appendChild(img) body.appendChild(div); width = img.offsetWidth; height = img.offsetHeight; check = function () { if (img.offsetWidth !== width || img.offsetHeight !== height) { clearInterval(intervalId); callback(img.offsetWidth, img.clientHeight); img.onload = null; div.innerHTML = ''; div.parentNode.removeChild(div); }; }; intervalId = setInterval(check, 150); }; // 加载完毕后方式获取 img.onload = function () { callback(img.width, img.height); img.onload = img.onerror = null; clearInterval(intervalId); body && img.parentNode.removeChild(img); }; // 图片加载错误 img.onerror = function () { error && error(); clearInterval(intervalId); body && img.parentNode.removeChild(img); }; }; </script> <script> window.onload = function () { var imgUrl = 'http://www.veryhuo.com/uploads/common/images/14407.jpg?', testReadyBtn = document.getElementById('testReadyBtn'), clsCacheBtn = document.getElementById('clsCacheBtn'), status = document.getElementById('status'), statusReady = document.getElementById('statusReady'), statusLoad = document.getElementById('statusLoad'), imgWrap = document.getElementById('imgWrap'); var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload = function () { callback(img.width, img.height); img.onload = null; }; }; }; testReadyBtn.onclick = function () { var that = this; that.disabled = true; status.style.display = 'block'; statusLoad.innerHTML = statusReady.innerHTML = 'Loading...'; imgWrap.innerHTML = '<img src="' + imgUrl + '" />'; // 使用占位方式快速获取大小 imgReady(imgUrl, function (width, height) { statusReady.innerHTML = 'width:' + width + '; height:' + height; }, function () { statusReady.innerHTML = 'Img Error!'; }); // 使用传统方式获取大小 imgLoad(imgUrl, function (width, height) { statusLoad.innerHTML = 'width:' + width + '; height:' + height; that.disabled = false; }, function () { statusLoad.innerHTML = 'Img Error!'; that.disabled = false; }); }; clsCacheBtn.onclick = function () { imgUrl += new Date().getTime(); status.style.display = 'none'; imgWrap.innerHTML = ''; }; }; </script> </head> <body> <p><button id="testReadyBtn">开始加载图片</button> <button id="clsCacheBtn">清空缓存</button>(如果图片加载过后，浏览器会缓存)</p> <div id="status" style="display:none"> <p><strong>imgReady:</strong><p> <p id="statusReady"></p> <p><strong>imgLoad:</strong></p> <p id="statusLoad"><p> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!