建站知识
Site of knowledge
使用JQ实现图片延迟加载功能
2014/3/11
在你的网页</head>上添加一下代码：
<SCRIPT type=text/javascript src="{dede:global.cfg_templets_skin/}/js/jquery.lazyload.js"></SCRIPT>
<script type="text/javascript">
jQuery(document).ready(
$(function() {
$("img").lazyload({placeholder : "{dede:global.cfg_templets_skin/}/grey.gif",effect : "fadeIn",threshold : 200 });
});
});
</script>
Lazy Load 这个 jQuery 插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。
Lazy Load原理：
把img的src里的值，存放到自定义的original属性里，当图片滚动到浏览器可视区域内时，再把original里的值赋回到src里，实现分屏加载。
<SCRIPT type=text/javascript src="{dede:global.cfg_templets_skin/}/js/jquery.lazyload.js"></SCRIPT>
<script type="text/javascript">
jQuery(document).ready(
$(function() {
$("img").lazyload({placeholder : "{dede:global.cfg_templets_skin/}/grey.gif",effect : "fadeIn",threshold : 200 });
});
});
</script>
Lazy Load 这个 jQuery 插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。
Lazy Load原理：
把img的src里的值，存放到自定义的original属性里，当图片滚动到浏览器可视区域内时，再把original里的值赋回到src里，实现分屏加载。