为什么要在网页中避免网页中直接使用IMG标签？我总结一下有以下几个原因：

1、无法控制图片加载的时间，比如我做一个有大量图片的网站，而网站中的图片可能还有CSS动画什么的，我们需要像以往Flash网站一样的加载进度条，在所有图片加载完后才能正常让网页动起来。如果不是这样，可能动画就达不到预期的效果，像CSS动画有可能就会出现衔接的问题，因为浏览器是在某图片加载完后对它做动画，而并不是在所有图片加载完后做动画，这就会导致动画不同步的问题。

2、无法在某些时候换用其他的显示图片的方式，比如有时我们想用前景的方式显示图片，有时我们想用Canvas的方式显示图片，如果写死用IMG标签，那会导致这样的功能就难以实现了。

3、这个问题跟第一个问题有几分相似，如今很多网站已经采用自适应（响应式）的设计，对于这种设计，会出现某些资源在某些设备上并不想显示，不仅是不想显示，甚至是不能加载，想象一下DESKTOP下的页面用的大图我们万一用手机访问，这张图依然被加载，那轻则网页打开缓慢，重则浏览器崩溃，万一浏览者不是用的WIFI，那。。。他死定了。但是正如第一点所说，没办法直接控制IMG标签，当然有人可能会说了，我用JS来判断，然后用JS来插入这些图片进页面不也可以么，嗯。。。是可以，不过你可以试试看，看这种写法会浪费你多少时间，万一要后期要修改呢？不仅这种方式不直观，而且还会浪费大量的时间。

4、性能问题，某些浏览器（比如Chrome）对于图片处理或许会存在一定的性能问题，在滚动页面或者重新渲染页面时，某些图片会存在即时解码的问题，也就是即便之前已经解码了也渲染了，当页面有改动或者滚动需要重新渲染时，这张图片会被重新解码，之后是RESIZE，之后再显示，如果对页面性能要求高，比如在做动画时，那这是致命的性能问题。

好吧，暂时我也就发现这多问题了，那么解决方法是什么？这是我现在常用的方法：

1、使用DIV来代替图片，比如我们可以这样写：

。这里我们使用一个固定的Class名称来代表这是一张图片，之后使用HTML的DATASET，设置一个自定义的属性data-src来指明图片的路径。

2、使用JS来获取页面中的带picture标签的DIV，之后加载相应的图片，然后可以在这些图片都加载完后插入到相应的DIV中，之后显示页面。这样可以灵活解决图片加载的问题。

3、对于上面据说的可能像Chrome这样的浏览器存在的性能问题，我们可以使用Canvas来代替IMG标签，这样性能问题也解决了。