TinyMce图片延迟加载

1.先来说说图片延迟加载

如果页面包含很多img标签，建议对图片做延迟加载，能加快网页显示速度

延迟加载也很简单，让所有img的src指向一张固定的图片，比如 http://www.baidu.com/img/bdlogo.gif

然后再设置 src2 属性，让src2指向真正的图片地址，比如 http://gtms04.alicdn.com/tps/i4/T1s61XFB0fXXaFe_Qh-180-240.jpg

简单的延迟加载就是：等页面html结构加载完，使用 src2 属性替换掉src的属性就可以了

再人性化一点，就是只加载 第一屏 的图片，当鼠标滚动时，加载当前屏 的图片，这需要动态计算

现在好多网站，都会这么做，比如 天猫商城

2.哪些地方可以做图片延迟加载

轮播图片：这是一个被容易遗忘的地方，其实除了第一张图片，后面的轮播图片都可以延迟加载

Tab页签：和轮播一样，也是容易被遗忘的地方

图片列表：这是最容易想到的地方，典型的就是电商网站的商品列表页面，搜索网站图片的搜索结果页

友情链接：很多网站列出一大推友情链接，并且使用各个网站的logo图片，这里也容易被遗忘

当然根据你页面的实际情况来设计，特别是：当你页面的html结构，能确定 第一屏 的位置

这种情况下，第一屏的图片，建议不要做延迟加载，因为第一屏也做延迟加载，用户一开始看到的页面

就是统一的默认图片，这种体验效果，并不是很理想。

3.再来说说TinyMce的图片延迟加载

TinyMce是一个高级编辑器，允许用户html源代码编程，其实这也是一个 容易被遗忘 的地方

但是TinyMce默认情况下，会给img标签加上 data-mce-src 属性，值和 src 的值一样

假设这是你编辑的内容

其实在TinyMce编辑器里面，内容已经变成

因此你保存内容时，就不需要再多余的设置 src2 属性，直接利用 data-mce-sec 属性

	

		
		
		
					<img src="http://www.baidu.com/img/bdlogo.gif" data-mce-src="http://image1.suning.cn/images/shop/cms/269/1395482148758_1200.jpg"/>
		
	
	
	
	
	

4.关于获取TinyMce编辑器内容

注意：获取TinyMce内容有两种方式，并且结果不一样

// 获取编辑器实例
var editor =  tinyMCE.get("elm2");
var html = editor.getBody().innerHTML;

这种情况下获取的html结构，针对img标签：才会有 data-mce-src 属性

如果你不想使用这个属性，或者根本没必要做延迟加载，就想获得原始的html内容

// 获取编辑器实例
var editor =  tinyMCE.get("elm2");
var html = editor.getContent();