小站建成之初，就想试试基于jQuery的图片懒加载插件lazyload。看到别的站点实现懒加载看着很炫，虽不知道是否也使用的是jQuery的lazyload插件，但感觉jQuery的lazyload会更方便。按照jQuery的风格，以更少的代码去实现更多的功能想必lazyload也是一样，用法
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$('img').lazyload();
</script>
打开网页测试一下，发现没有看到效果，再多刷新几次还是一样。感觉是不是配置错了，用火狐的调试程序看了一下也页面请求。这是神马懒加载啊！压根就是没效果，图片请求还是长长的列表。
后面到网上搜索发现网上有的说法是要把图片的img中的src属性处理一下，想想也对，因为图片中src地址直接就是图片的真实地址了，那插件速度再快也来不及把所有img请求截止处理。于是我把img中的属性添加了一个data-original属性值是图片的真实地址，src属性则可以随意指向一个你预先设置好的占位图片，如loading图。
<img data-original='/people.png' src='loading.gif' />
就如以上效果类似。然后再刷新整个页面，发现效果实现了。但没有渐变效果，于是把代码改改。
$('img').lazyload({effect:"fadeIn"});
这样就有了渐变效果。
虽然实现了效果，可感觉还是有点别扭！主要是要更改img的属性。如果页面中的HTML代码是数据库中取出数组然后拼装出来的还好办，直接改下拼装代码即可。但要是文章内容就麻烦了，因为文章内容存在数据库中的就是现成的HTML字符，是拼不出来的。现在用所见所得编辑器的属于多数，就算是添加图片后，回到源码编辑状态下修改img属性也感觉麻烦，并且回到所见所得模式下看不到真实图片地址，有一点点影响。
思来想去，感觉还是在发布文章内容的时候，还是不去源码状态下修改img。等发布提交到服务器时，再用PHP去正则替换所有img标签的src属性并添加data-original属性以达到文章内容实现懒加载效果。但如果这样的话，数据库中保存的文章内容里的img标签就是改动后的标签了，日后要不用lazyload插件还是挺麻烦！有的童鞋也许就说，我写库的时候也不替换img属性，我读的时候再替换，但这样也会产生一个效率问题，毕竟在博客中读取数据是最频繁的，每次读取文章都用正则替换再显示，估计也不是长久之计。
看来，有得必有失！
