如何通过JQ实现图片延迟加载作者：协策网络-客服部 标签：上海网站建设 日期：2014年03月12日 类别：基础教程 |
||||
当大家在加载网络中的图片的时候，想必大家都想过这样一个问题，如何才可以通过JQ来实现图片延迟加载呢？现就针对此问题，以下协策网络小张为大家进行一下解读！
首先，你可以在你的网站页页</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里，从而实现分屏加载的功能。
责任编辑：上海网站建设协策网络（网址：http://www.580plan.com/），转载请注明出处，谢谢!  您可能感兴趣的文章推荐 |
||||
|
协策网络公司拥有专业的网站建设开发团队，超过四年以上的网站建设、网页制作经验，我们可承接企业电子商务网站建设、企业展示型网页设计和功能型网站制作等各类型网站设计制作。
COPYRIGHT © 上海协策网络科技有限公司 2008-2014 网站地图 SITEMAP 上海做网站公司 沪ICP备08009778号
地址：上海市共和新路425号凯鹏国际大厦13楼G座（近3、4、8号线）
电话：021-51085186 传真：021-56555059 咨询：+(86)18018609689