1、你的页面要引用jQuery，这是基础；
2、你的页面要引用jQuery插件typed.js，这是关键；
3、你的页面上要有一个id为typed的容器。
//引入jquer.js和lazyload.js<script type="text/javascript">
$(function() {
$("img").lazyload({
effect : "fadeIn"
})
})
</script>
其中img是延迟加载所有图片，也可以根据不同模板作相应改动，比如我这个主题，可以改成#post img，这样只延迟加载#post 容器内的图片，否则可能影响到侧边图片的加载，主要是留言者头像可能会最后加载；
fadeIn是图片显示效果
这样基本就可以了！
如果上面的功能可能没有达到你的要求，还有几个选项可供设置。
可以设置阀值来控制 灵敏度
$(“img”).lazyload({ threshold : 200 })
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
})
还可以通过定义effect 参数来定义一些图片显示效果
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
})
事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
})
延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.
$(function() {
$("img:below-the-fold").lazyload({
placeholder : "img/grey.gif",
event : "sporty"
})
})
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000)
})
图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.
CSS
#container {
height: 600px
overflow: scroll
}
JavaScript 代码:
$("img").lazyload({
placeholder : "img/grey.gif",
container: $("#container")
})
