1. 隐藏图片且不下载
1.1. visibility 和 display 区别
- visibility 隐藏元素但标签位置还占用着。display 在 DOM 树中存在，但标签在页面上不占位，审查元素其看不到大小和位置
- 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘。
- 读屏器不会读取
display: none;元素内容；会读取visibility: hidden;元素内容
1.2. 浏览器不下载图片的办法
无论是 display 还是 visibility 都无法阻止图片下载。只能隐藏。
用 div 套着 img，div display none 也无法组织图片请求。
<style>
img {
display: none;
visibility: hidden;
}
</style>
<body>
<img src="http://wx1.sinaimg.cn/mw690/4b4d632fgy1fieobgb1ftj209c08cjse.jpg">
<div style="display: none;">
<img src="http://wx1.sinaimg.cn/mw690/4b4d632fgy1fieobgb1ftj209c08cjse.jpg">
</div>
</body>
但是 div 换成 textarea 就好用，图片不会被请求。
<textarea style="display: none;">
<img src="http://wx1.sinaimg.cn/mw690/4b4d632fgy1fieobgb1ftj209c08cjse.jpg">
</textarea>
更好的方法，使用 html template 标签
<template>
<img src="mm1.jpg">
</template>