本文介绍了一个简单的JavaScript图片预加载实现,主要面向IE浏览器环境。通过动态创建Image对象并监听load事件,实现图片在后台加载,避免页面渲染时的阻塞。代码包含加载进度提示和遮罩层效果,适合需要快速实现预加载功能的开发者参考。
JavaScript 图片预加载示例
作者:编程浪子
近期图片预加载技术受到较多关注,本文提供一个简易实现。由于开发环境限制,仅在IE浏览器中进行调试,内容仅供交流参考。
<html> <head> <title>IE图片预加载类</title> </head> <body> <div id="counter" style="position:absolute; z-index:98; left:expression(document.body.clientWidth/2-60); top:expression(document.body.clientHeight/2-10); width:120px; height:20px; background:#000000; color:#ffffff;">图片加载中...</div> <div id="divPageMask" style="position:absolute; z-index:99; left:0px; top:0px; width:expression(document.body.clientWidth); height:expression(document.body.clientHeight); background:black; filter:alpha(opacity=50);"></div> <div id="box"></div> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]