整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
本例演示如何向 HTML 页面添加背景图片。
<html>
<body background="background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>
HTML基础操作：图片显示
页中预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速加载，特别是一些大型的电商网站就常用！帮助用户在浏览你网站内容时获得更好的用户体验，下面就来说说实现图片预加载的方法。
一、使用JavaScript实现预加载
提供两种这样的预加载方法，它们可以很漂亮地工作于所有现代浏览器之上。
只需简单编辑、加载所需要图片的路径与名称即可，很容易实现：
该方法尤其适用预加载大量的图片。画廊网站使用该技术，预加载图片数量达50多张的时候。将该脚本应用到登录页面，只要用户输入登录帐号，大部分画廊图片将被预加载。
另外一种方法与上面的方法类似，也可以预加载任意数量的图片。将下面的脚本添加入任何Web页中，根据程序指令进行编辑即可。
每加载一个图片都需要创建一个变量，如“img1 = new Image();”，及图片源地址声明，如“img3.src = "../path/to/image-003.gif";”。参考该模式，你可根据需要加载任意多的图片。
二、用CSS实现预加载
单纯使用CSS，可容易、高效地预加载图片，代码如下：
#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }#preload-03 { background: url(-03.png) no-repeat -9999px -9999px; }
将这三个ID选择器应用到HTML元素中，我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在Web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何JavaScript。
击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
在H5的页面中，我们经常会看到开头有一个loading的效果，这个loading的时间内就是在加载图片资源，以便后续滑屏效果更流畅。那么JS如何来判断图片资源已加载完成呢？且如何能更优雅的写断定代码。
首先，提一下两个事件：jquery中有一个ready和window.onload的区别。ready只是dom结构加载完成，图片并没有加载完毕，而onload是dom生成和资源完全加载出来后才执行，这里也就包括图片已加载。
所以，基本这点，接下来我们来看一下JS是如何断定单图和多图加载完成的。
IE8下版本不支持onload事件，但支持onreadystatechange事件，readyState是onreadystatechange事件的一个状态，值为loaded或complete的时候，表示已经加载完毕。代码如下所示：
在不考虑兼容的情况下，使用onload事件就足够了，下面分单图和多图及结合promise来给出代码。
1. 单图（onload）
2. 单图（+promise）
3. 多图（onload）
4. 多图（+promise）
*请认真填写需求信息，我们会在24小时内与您取得联系。
