首页 > 教程 > 关键词 > CSS最新资讯 > 正文

纯CSS图片预加载

2009-10-28 09:24 · 稿源:前端观察

有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片。

为什么使用预载

你为什么会考虑使用预载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候,很漂亮而且流畅,没有延迟。

CSS代码

这个概念就是写一个CSS样式设置一批背景图片,然后将其隐藏,这样你就看不到那些图片了。那些背景图片就是你想预载的图片。

这是一个例子:

以下为引用的内容:

#preloader {
/* Images you want to preload*/
background-image: url(image1.jpg);
background-image: url(image2.jpg);
background-image: url(image3.jpg);
width: 0px;
height: 0px;
display: inline;
}

这只是一种隐藏你的图片的方法,所以它们不会被显示。我也见到有人使用非常大的background-position值将图片推出去。或者给一个负的margin值。有很多中方法隐藏你要预载的图片,选择最适合你的吧。

另一种情况

有巨大的图片需要下载的情况并不会经常发生,如果你采用通常的做法,提供某种图片正在加载的表示。这里是一些CSS,可以给用户一个提示:图片正在加载。

以下为引用的内容:

img { background: url(loadingHourGlass.gif) no-repeat 50% 50%; }

gif图片可以是动画,类似于mac上的沙滩球或者PC上的沙漏之类的东东。采用一个动画吧,这样用户就会知道事情正在进行。

结论

当预载有意义的时候做你最好的吧,你的用户将以此喜欢上你。事实上他们可能并没有注意到,但是这是一件好事情,如果他们注意到你的网站正在加载,那可能真的是太慢了。

查看Demo

原文地址:http://www.qianduan.net/pure-css-image-preloader.html

  • 相关推荐
  • 大家在看
  • Chrome现已支持延迟加载网页中的iframe元素

    一年前,谷歌为 Chrome 76 引入了延迟加载图片的功能。昨日,Chrome 工程主管 Addy Osmani 又宣布,他们将在新版浏览器中启用延迟加载 iframe 元素的标准功能。在启用 <iframe loading = lazy> 属性之后,Chrome 将推迟相关元素的加载,直到用户将网页滚动到附近为止。

  • 北京互联网法院:个别图片公司或律师专门从事图片维权获利

    日前北京互联网法院发布关于涉网图片类著作权案件的调研报告。报告指出,个别图片公司或者律师甚至专门从事图片维权诉讼,利用专业软件检索到侵权行为后再向图片权利人寻求授权,以提起诉讼的方式获取不正当商业利益。

  • 法院:个别图片公司诉图牟利 图片版权市场功能未能有效发挥

    今日,北京互联网法院发布数据称,北京互联网法院自 2018 年 9 月 9 日成立以来至 2020 年 6 月 30 日,共受理案件 64473 件,其中著作权案件 49855 件,占比77%,涉图片类著作权案件在所有著作权案件中的占比超过一半以上。

  • 我搜索了一张图片,又双叒叕侵权了!

    虽然国内图片市场在不断的完善中,但直到目前还是有很多人吃了图片侵权的亏。其中新闻网站等媒体侵权多发,微博、微信、博客、贴吧等平台上的自媒体用户侵权现象同样十分普遍。

  • 纸人2全部boss打法攻略 杨依兰夫人等boss打法教程

    纸人2中的boss不是特别多,但是有的boss还是需要一定的技巧才能过关的,今天就来为大家带来殷凌、殷洪​、杨依兰等boss战的打法攻略,希望对大家有所帮助。

  • 合作共赢 文思海辉为日企AUTOBACS重构网上商城

    8 月 1 日,由Pactera Technology日本株式会社(文思海辉,以下简称"Pactera")、JSOL株式会社(以下简称"JSOL")、SAP日本株式会社(以下简称"SAP")、AB System Solution株式会社(以下简称"ABSS")为AUTOBACS7 株式会社(以下简称"AUTOBACS")共建的新的汽车用品网上商城成功上线。新的AUTOBACS网上商城可在所有接触点提供个性化购物,显著改善客户购买体验,助力AUTOBACS公司深化线上布局,构建竞争壁垒。Pactera基于丰富的实

  • 取代短信!5G消息开启商用:可发图片、视频、位置

    毫无疑问,国内的5G建设已经驶入了快车道,而相应的配套应用也应该加速前进。据最新消息显示,三大运营商都已经开始启动首批5G消息应用动,而随着这个新功能的加入,或将改变灾害预报系统,为

    5G
  • 女子发摸腿动漫图片微信账户被封!腾讯:遭他人投诉构成违规

    7月20日消息,据媒体报道,家住福州的曹女士称,自己的微信账号突然被临时限制登陆,提示“该微信帐号因涉嫌传播色情/暴力/非法营销等违法内容被限制登录”需要被查封三天。曹女士

  • 用户发摸腿动漫图片微信账户被封 腾讯:遭他人投诉构成违规

    家住福州的曹女士称,自己的微信账号突然被临时限制登陆,提示“该微信帐号因涉嫌传播色情/暴力/非法营销等违法内容被限制登录”需要被查封三天。

  • Jurassic World中的赚钱机会

    LandLab发布的第 1 款游戏神龙岛已经大获成功,其第 2 款游戏Jurassic World即将在 7 月 15 日正式内测,作为具有极具创新性的驯养类区块链游戏,Jurassic World必将给用户带来全新的游戏体验。游戏与区块链技术的结合能够创造大量潜在的金融红利,而且所有人都能平等地参与到利益分配中,早期用户更是可以近水楼台先得月,那Jurassic World中有哪些赚钱机会呢?JT(Jurassic Token)是Jurassic World的游戏通证,总量恒定 10 亿,

  • 魔兽世界怀旧服安其拉神殿全boss攻略 TAQ超详细9个boss打法教程

    魔兽世界怀旧服的安其拉神殿(简称TAQ)在7月底就要正式开放了,很多玩家还不清楚安其拉神殿的9个boss怎么打,下面就来为大家分享一下魔兽世界怀旧服安其拉神殿的全boss攻略。

  • 在线预览更完善,3分钟看懂永中DCS升级新模样

    永中DCS文档在线预览软件是通过解析常用办公文档格式,支持不同文档格式间的相互转换,为用户提供常用文档的阅读等服务,自上线以来,屡获政府部门、央企单位、邮箱客户、OA办公系统、招聘网站、教育等众多客户的好评。与此同时,团队始终坚持以用户为本,不断优化、升级产品。 近日,永中DCS发布了V4. 0 新版本,新版在文档转换质量、用户体验及文档安全方面都带来了重大提升,永中软件致力为用户打造更贴合业务场景的在线预览产

  • 销售易受邀出席CSIC 2020第五届SaaS应用大会

    近日,企业级新型CRM开创者销售易受邀出席 CSIC2020 第五届SaaS应用大会,并在大会“云领奖” 评选中 ,销售易创始人兼CEO 史彦泽荣获【年度 SaaS 行业杰出人物】殊荣。 据悉,本届大会由Top智汇、上海市软件行业协会主办,以“共识价值 全面数字化”为主题,聚焦企业数字化变革,CIO选型,智能办公,HR科技,营销与财务数字化等热点话题,来自600+ 企业CEO、CIO、CTO、HRD、CFO、CDO等数字化、信息化负责人及SaaS领军企业,投资?

  • 海柔创新入选LogisticsIQ全球TOP50仓储自动化公司

    近日,国际权威物流与供应链研究&咨询公司LogisticsIQ发布最新版《 2020 年仓储自动化市场图谱》,海柔创新入选“AGV/AMR”(自主移动机器人)板块,并被评为全球TOP50 仓储自动化公司。 LogisticsIQ TOP50 仓储自动化公司 该榜单将自动化公司分为四个主要类别:物料搬运设备提供商或系统集成商,自主移动机器人(AMR),自动识别和数据捕获(AIDC)和仓库管理系统(WMS)。海柔创新(HAI ROBOTICS)是AMR类别中的 18 家公司之一,这是对海?

  • 区块链游戏Jurassic World即将正式内测

    游戏向来被认为是区块链最佳的落地场景之一,包含Microsoft、Google、腾讯和网易等不少我们耳熟能详的传统互联网巨头都已对该领域进行了深度的战略布局,如何将传统游戏藉由区块链技术而创造新价值与玩法?区块链游戏公司LandLab给出了答案,继其第 1 款游戏神龙岛正式内测 1 个月后,其第 2 款游戏Jurassic World(侏罗纪世界)也已开发完成,即将正式开始内测。Jurassic World(侏罗纪世界)是以侏罗纪时代为背景基于区块链技术的

  • 陆游房车牵手ACSI(中国) 为旅行爱好者带来超全房车旅游攻略

    不久前,“陆游房车”所属公司洪泰文旅与ACSI(中国)签署战略合作协议,就野奢露营及非标生态度假领域进行深度合作,共同推动中国房车租赁产业的高质量发展。ACSI,即Auto Camper Service International,译为国际汽车露营服务有限公司,是一家与“飞跃”、“凤凰”、“红双喜”同年代的老品牌。ACSI成立于1965年,致力于为用户打造露营线路和户外旅行体验,是目前欧洲露营行业的领军品牌。由于起步较早,露营文化在欧美国家已极其普遍,截至2

  • 京东智联云智能视联网荣获CSDN“AI优秀案例实践”奖

    近日,由CSDN主办的第三届AI开发者大会(AI ProCon 2020)通过线上直播举行。CSDN"百万人学AI"评选活动结果在会上重磅揭晓。作为“可信赖的AI”又一个落地案例,京东智联云秸秆焚烧监测系统用AI防患于未“燃”,凭借在农业的数字化探索和环境的可持续发展方面的举措,入选权威科技媒体CSDN的“AI优秀案例实践奖TOP30”。CSDN是中国最大的开发者社区和服务平台,覆盖 3000 万开发者,其中有约 230 万与AI相关的开发者。2018 年,CSDN?

  • 独特设计之选——评价ISSEY MIYAKE三宅一生新品手表

    随着审美追求的变化,在衣物之外的饰品开始越来越多元化,直到腕表的出现,一块小小的腕表既是功能性器械,又起到装饰作用,它可以是珠宝,也可以是彰显个性的挂件,就那样戴在人的手腕上,不显突兀的同时又极具存在感。手表所能表达的意义已经极大的发展,越来越呈现多元化的趋势,有点表现品味与个性思维的道具的意思了,如果现在的人出门手上没有一块手表,看起来都好像缺了点什么,它好像已经成为了我们互相了解的重要一环。 ?

  • 深圳市风向标信息作为AppDynamics服务商,提供 3 个许可证免费+技术支持

    年初的疫情,在给全球经济发展带来巨大考验的同时,也催动“新基建”成为当下最强劲的产业风口之一。“新基建”是服务于数字经济的新型基础设施,浪潮之下,数字业务已经成为企业增长与业务创新的着力点,对企业的重要性愈加显现。而是否拥有领先的应用性能管理平台,已经成为企业数字化转型成功的关键。助力企业数字业务:“ 3 个许可证免费+免费技术支持”近期,服务商深圳市风向标信息技术有限公司(以下简称「风向标信息」)推出?

  • 没有公网IP,不用端口映射,也能远程连接MSSQL数据库!

    微软SQL Server数据库服务器MSSQL,提供从服务器到终端的完整解决方案,颇受大众喜爱。但数据库服务器一般部署在内网,只有本地局域网的设备才能访问。在远程办公、移动办公常态化的情况下,如何满足远程建立、使用和维护数据库呢?如果数据库服务器所在的网络环境没有公网IP或者没有路由器/光猫管理权限,就需要进行内网穿透。国产内网穿透服务商花生壳,旗下有一款硬件版内网穿透神器——花生壳盒子,不需要公网IP,不用设置路由

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签