利用CSS、JavaScript及Ajax实现图片预加载的方法

发布时间：2020-12-15 23:23:01 所属栏目：百科来源：网络整理

导读：预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。

实现图片预加载可以使用css、JavaScript、Ajax三种方法。下面分别介绍这些方法的实现。

使用CSS

单纯的使用css可以将图片加载到页面元素的背景上，这种方法简单、高效：

在其他地方调用时，只要路径一致，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何JavaScript。

弊端：使用这种方法，图片会随着页面加载同时加载，延长页面加载的时间，使用JavaScript辅助完成会更高效。

使用CSS和JavaScript结合

我们把图片加载设置到页面加载完成之后，所以不必担心由于图片和页面同时加载而延长访问时间。

如果JavaScript运行失败也不必担心，仅仅是图片预加载失败而已，当调用图片时也能正常显示。

使用JavaScript实现

方法一

方法二

这种方法其实和方法一是一样的原理，只不过没有放在数组中实现，而是分别去为 Image 对象的 src 负值。

使用Ajax

假设上面的所有方法都不够酷炫，那么，还有一种方法，就是使用Ajax来实现图片的预加载。使用DOM来实现预加载，可以加载包括图片，CSS，JavaScript的其他任何东西。相对于直接使用JavaScript，使用Ajax的好处就是CSS和JavaScript可以在他们的内容不影响当前页面的情况下被预加载。对于图片来说这确实不是一个问题，尽管如此，这个方法依然很简洁高效：

就像这样，这段代码会预加载三个文件：preload.js，preload.css，preload.png。设置1秒的延时主要是防止加载JavaScript文件而导致正常页面的功能性问题。

为了将其封装起来，我们看看怎么使用原生JavaScript来写这一段代码：

varhead =document.getElementsByTagName('head')[0]; // a new CSS varcss =document.createElement('link'); css.type = 'text/css'; css.rel = 'stylesheet'; css.href = 'http://domain.tld/preload.css'; // a new JS varjs =document.createElement('script'); js.type = 'text/javascript'; js.src = 'http://domain.tld/preload.js'; // preload JS and CSS head.appendChild(css); head.appendChild(js); // preload image newImage().src ='http://domain.tld/preload.png'; },1000); };

在这里，我们通过DOM创建了三个元素来预加载了页面上的三个文件。正如原文中所提到的，对于Ajax来说，这个方法不是那么好。预加载的文件内容不应该添加到正在加载的页面中。

以上所述是小编给大家介绍的利用CSS、JavaScript及Ajax实现图片预加载的方法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

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