讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

首页 > web前端 > js教程 > 正文

javascript 也来玩玩图片预加载_javascript技巧

php中文网

发布： 2016-05-16 19:14:00

原创

1149人浏览过

作者：编程浪子
最近玩图片预加载的人好像特别多，我也来一个，个人比较懒，只在IE上调试，大家就当无聊聊玩玩吧

易标AI

易标AI

告别低效手工，迎接AI标书新时代！3分钟智能生成，行业唯一具备查重功能，自动避雷废标项

易标AI

135

易标AI

<title>IE图片预加载类</title>
<script language="<a style=" color: text-decoration:underline title="javascript" href="https://www.php.cn/zt/15724.html" target="_blank">javascript"> 
function LoadImageClass() 
{ 
    var me = this; 
    var a = [];    //图片数组 
    this.Idx = 0;    //已经被加载的图片个数 
    this.Num = 0;    //图片总数

//下载图片 
    this.LoadImages = function(s) 
    { 
        a = s.split(","); 
        this.Num = a.length; 
        DownImg(); 
    }

function DownImg() 
    { 
        var i=new Image(); 
        var f = true; 
        i.onload= function() 
        { 
            if (f) 
            { 
                f = false 
                me.Idx++; 
                if (me.LoadIng) me.LoadIng(); 
                if (me.Idx<me.Num) DownImg(); 
                else if(me.CallBack) me.CallBack(a); 
            } 
        } 
        i.src = a[me.Idx]; 
    } 
} 
</script><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>

<script language="javascript"> 
    var o = document.getElementById("counter"); 
    var t=new LoadImageClass(); 
    t.LoadIng = function() { o.innerHTML="加载进度："+Math.floor(t.Idx/t.Num*100)+"%" }; 
    t.CallBack = function(arr) 
    { 
        window.setTimeout(function(){o.style.display='none';alert('图片加载完毕！')},1000); 
        document.getElementById('divPageMask').style.display='none'; 
        var str=""; 
        for(var i=0;i<arr.length;i++) 
        { 
            str+='<img  src="'+arr[i]+'" / alt="javascript 也来玩玩图片预加载_javascript技巧" >
'; 
        } 
        document.getElementById("box").innerHTML=str; 
    } 
    t.LoadImages('http://www.baidu.com/img/logo-yy.gif,http://bbs.51js.com/images/default/logo.gif,http://www.programbbs.com/bbs/uploadFace/46_2006910934216927.gif,http://photo.hjbbs.com/photo/20060531/20060531103027226_756_o.jpg,http://img1.soufun.com/bbs/2007_02/13/1171345302199.jpeg,http://img.c8c8.cn/2006/09/09/15032/pp20060909002749.jpg'); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

相关标签：

javascript

大家都在看：

javascript库是什么_jQuery还有使用的必要吗 javascript中的拖放功能如何实现_如何使元素可拖动如何实现动画效果_javascript控制CSS动画的方法是什么？ javascript的web audio api是什么_如何处理声音？如何使用JavaScript进行跨平台开发_Flutter和React Native有什么区别呢

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：javascript支持区号输入的省市二级联动下拉菜单_javascript技巧下一篇：jsp中执行onclick会刷新一次页面的问题

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

javascript的内存泄漏是什么_怎样避免和排查？ JavaScript内存泄漏指本该回收的内存未释放，导致内存持续增长甚至崩溃；常见原因包括全局变量意外挂载、未清理事件监听器、定时器未清除、闭包过度捕获及缓存无上限；预防需遵循“谁创建谁清理”，排查依赖ChromeMemory面板堆快照与引用链分析。

2025-12-14 15:37:44

314

javascript的shadow dom是什么_它如何封装样式？ ShadowDOM是浏览器原生的DOM封装机制，通过attachShadow创建独立子树实现样式局部化与DOM隔离；支持天然隔离、::slotted()穿透和:host控制，继承属性与全局样式仍可透入，open模式下JS可访问但样式封装由浏览器保障。

2025-12-14 15:32:03

301

如何全局定制 Tailwind CSS Forms 插件的默认样式本文旨在指导开发者如何有效覆盖@tailwindcss/forms插件的默认样式，特别是颜色方案，以实现全局化的定制。不同于手动应用Tailwind实用工具类，我们将介绍插件作者推荐的直接CSS覆盖方法，通过在@layerbase中定义CSS规则，并利用theme()函数与Tailwind配置保持同步，从而实现统一且易于维护的表单样式。

2025-12-14 15:12:00

541

NextAuth会话中存储访问令牌：安全考量与最佳实践本文深入探讨了在NextAuth会话中存储访问令牌的安全性与实践。通过利用NextAuth强大的JWT会话策略，访问令牌能够被加密并安全地管理。文章将详细指导如何在NextAuth配置中集成自定义认证逻辑、扩展会话数据，以及在客户端安全地访问这些令牌。同时，强调了令牌轮换等关键安全最佳实践，以确保生产级应用的健壮性和安全性。

2025-12-14 15:08:12

227

在React-Leaflet中构建分层设色地图：GeoJSON数据加载与渲染实战本教程详细介绍了如何在React应用中利用React-Leaflet库构建交互式分层设色地图。核心内容包括正确加载GeoJSON地理数据，特别是解决直接导入文件可能遇到的问题，并通过fetchAPI结合useEffect钩子实现异步数据加载。文章还将指导如何将数据渲染到地图上，并提供基础样式设置，确保地图的准确显示和良好用户体验。

2025-12-14 14:44:32

872

什么是Javascript的异步函数与await？ async/await是基于Promise的语法糖，使异步代码更易读、错误处理更直观；async函数必返回Promise，await只能在async函数内使用，用于等待Promise完成并自动解包，需用try/catch捕获异常。

2025-12-14 14:36:50

999

D3.js 动态数据工具提示实现指南：解决事件处理函数中的数据绑定问题本文详细阐述了在D3.js中实现鼠标悬停动态数据工具提示的方法。重点解决了在mouseover事件处理函数中访问绑定数据时常见的错误，特别是D3.jsv6+版本中事件回调函数签名从(d)变为(event,d)的变化。通过提供完整的代码示例，读者将学会如何正确地将元素绑定数据动态展示在工具提示中。

2025-12-14 14:31:10

700

如何实现响应式设计_javascript中如何检测屏幕变化？响应式设计中JavaScript可通过resize事件、matchMedia和orientationchange事件感知屏幕变化，需节流resize以防性能问题，优先使用window.innerWidth等视口尺寸而非screen.width。

2025-12-14 14:23:36

551

如何用Javascript操作本地存储？ JavaScript本地存储使用localStorage和sessionStorage，以字符串键值对形式保存数据，需用JSON.stringify()存对象、JSON.parse()取对象，并注意null处理、同源限制及容量上限。

2025-12-14 14:01:02

308

JavaScript文件上传类型校验：告别模糊，拥抱MIME类型本文深入探讨了JavaScript中文件上传类型校验的常见误区，即错误地依赖input.value（文件名）进行判断，导致校验不准确且行为异常。我们将详细介绍如何通过访问inputElement.files[0].type获取文件的MIME类型，并结合正则表达式进行可靠的客户端校验。文章提供了修正后的代码示例，强调了MIME类型在文件处理中的重要性，并提醒读者客户端校验仅为用户体验优化，服务器端校验才是安全基石。

2025-12-14 13:51:09

343

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

React 教程

25535次学习
收藏
TypeScript 教程

14779次学习
收藏
Bootstrap 5教程

22819次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部