html 怎么让图片预先加载完, 用img标签的时候图片加载可慢了

您好，可以使用JS代码中的onload方法，这是页面载入事件，当你打开页面时，首先会加载onload事件中的内容。一般来说，为了给用户有良好的使用体验，会在onload中放入默认图片，也就是常见的图片加载中的图片，而不会直接显示空白，然后按照文档流来执行后面的img标签，再加载对应的实际图片，希望对您有帮助。

原因1、网站的图片已经过期！（解决：无，放弃这个网站，去别的网站找）

原因2、网速不够，导致图片加载不顺利，（解决：在红叉上单击鼠标右键“显示图片”，此方法不行，就是原因1的问题）

原因3、被工具屏蔽了图片〔解决：到控制面版－“添加/删除程序－卸载那些助手工具”〕

原因4、只是gif格式的图片不显示，（解决：internet选项－“高级”－“还原默认设置”

其他可能导致这种情况的因素：

修复ie浏览器

用各种工具

把所有的流氓软件全部删除

1．把 CSS 资源引用放到 HTML 文件顶部

一般推荐将所有 CSS 资源尽早指定在 HTML 文档

中，这样浏览器可以优先下载 CSS 并尽早完成页面渲染。

2．JavaScript 资源引用放到 HTML 文件底部

JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。

3．尽量预先设定图片等大小

在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排

4．不要在 HTML 中直接缩放图片

在 HTML 中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他 *** 作产生卡顿，因此要尽量减少在页面中直接进行图片缩放。

5．减少 DOM 元素数量和深度

HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。

6．尽量避免在选择器末尾添加通配符

CSS 解析匹配到 渲染树的过程是从右到左的逆向匹配，在选择器末尾添加通配符至少会增加一倍多计算量。

7．减少使用关系型样式表的写法

直接使用唯一的类名即可最大限度的提升渲染引擎绘制渲染树等效率

8．尽量减少使用 JS 动画

JS 直接 *** 作 DOM 极容易引起页面的重排

9．CSS 动画使用 translate、scale 代替 top、height

尽量使用 CSS3 的 translate、scale 属性代替 top、left 和 height、width，避免大量的重排计算

10．尽量避免使用 table、iframe

table内容的渲染是将 table 的 DOM 渲染树全部生成完并一次性绘制到页面上的，所以在长表格渲染时很耗性能，应该尽量避免使用它，可以考虑使用列表元素 ul 代替。尽量使用异步的方式动态添加 iframe，因为 iframe 内资源的下载进程会阻塞父页面静态资源的下载与 CSS 及 HTML DOM 的解析。

11．避免运行耗时的 JavaScript

长时间运行的 JavaScript 会阻塞浏览器构建 DOM 树、DOM 渲染树、渲染页面。所以，任何与页面初次渲染无关的逻辑功能都应该延迟加载执行，这和 JavaScript 资源的异步加载思路是一致的。

12．避免使用 CSS 表达式或 CSS 滤镜

CSS 表达式或 CSS 滤镜的解析渲染速度是比较慢的，在有其他解决方案的情况下应该尽量避免使用

---