JavaScript实现图片预加载，有破除缓存成果

发布时间：2018-08-19 09:05:13 所属栏目：编程来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys