史上最强大最简单的延迟加载技术

浏览:3725 发布日期:2014/10/24 分类:技术分享 关键字: 延迟加载技术 图片延迟加载 jquery.lazyload.mini.js
分享一款简单易用的图片延迟加载插件jquery.lazyload.mini.js,这个插件可能大家都看到过,真正掌握懂得使用的人并不多。本姑娘亲测,百度出来的那些方法都不行。没有办法,自己摸索,终于懂得这款延迟加载技术的使用了^_^
大家可以先看在线演示效果,本网站首页有100+张图片,打开速度是杠杠的!
演示地址http://www.jsdaima.com
使用方法如下:
首先引入js文件<script src="__PUBLIC__/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery.lazyload.mini.js"></script>
特别注意:必须是引入jquery.min.js,其他的如jquery-1.7.2.min.js是不行的。<script type="text/javascript">
  var jq=jQuery.noConflict();jq(function(){jq("img").lazyload({placeholder:"__PUBLIC__/images/loading.jpg",effect:"fadeIn",threshold : 800});});
</script>
备注:__PUBLIC__/images/loading.jpg便是预先加载的小图片,比较常见的是动态转圈的gif图像,threshold : 800这个参数是网页预先加载的值,为px像素
最后在插入图片的地方这样写<img src="__PUBLIC__/images/loading.jpg" original="{$v.thumbpath}m_{$v.thumbname}" alt="{$v.title}">备注:src="__PUBLIC__/images/loading.jpg"为预先载入的图片地址,original="{$v.thumbpath}m_{$v.thumbname}"为自己需要显示的图片地址
完成以上三步就搞定了!
附上插件下载地址:http://pan.baidu.com/s/11vOzc
最佳答案
评论( 相关
后面还有条评论,点击查看>>