jQuery lazyLoad图片延迟加载插件的优化改造方法分享

jQuery lazyLoad.js插件 是一款基于jquery框架，可以“实现”图片延迟加载的插件。请注意，我用了双引号，因为从我自己实际调试的结论来说呢，并不会延迟加载，而是先下载，然后通过改变<img>的src属性来隐藏原来的图片。
我们先来看看他的代码吧！

代码如下:

<script type="text/javascript" src="/static/jssrc/lazyload.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#team_main_side img").lazyload({
placeholder : "/static/theme/xituan/img/img_loading.gif",
effect : "fadeIn"
});
});
</script>

工作原理是先在<img>下创建original属性，并把src属性值赋值给original，然后再把src的值修改成你设置的 placeholder的值。当滚动条到达图片位置时，再把original的属性赋值给src。这个时候向服务器发出一个HTTP请求，确认下有没有修 改，服务器返回一个304状态，等于本来一遍HTTP请求能完成的工作，它用了2遍，非但没有减少开支，还增加开销，我彻底无语了。(如下图,火狐的firebug显示)

假如你使用过这个插件的话，你有没有发现，无论多大的图片，只要你的滚动条到达那个位置的话，图片就会很快的显示出来，有点不可思议吧。那是因为那张图片已经下载好了。
再者，我自己的想法，jquery的代码是在页面加载完成后才会执行的，那页面加载完的时候，图片较小的都下载完了，再执行jq代码的话，那种意义就不存在了。

那有问题肯定要解决，把这个插件的代码改一改。

好吧，开始了

打开这个jquery.lazyLoad.js,找到如下图第一个红框的代码，直接注释掉；第二个红框是需要自己手工添加上去的，然后保存。

在页面插入图片的代码如
<img src="http://jb51.net/upload/201010122047211034.jpg" alt=""/>
修改成
<img original="http://jb51.net/upload/201010122047211034.jpg" src="http://jb51.net/img/img_loading.gif" alt=""/>

最后记得插入js代码

[code]
<script type="text/javascript" src="/js/jquery.js"></script><!--jquery 包-->
<script type="text/javascript" src="/js/jquery.lazyload.js"></script><!--lazyload 插件-->
<script type="text/javascript"> //初始化代码
$(document).ready(function(){
$("#team_main_side img").lazyload({
placeholder : "http://jb51.net/img/img_loading.gif",
effect : "fadeIn"
});
});
</script>

这样所有图片就都显示img_loading.gif了,由于都是请求的同一个图片,浏览器只会请求一次..对于减少服务器http请求来说,我们的目标已经达到了.当浏览器滚动到图片的位置时候，就会把图片加载进来。

赞 (0)

相关推荐

  • vue2笔记 — vue-router路由懒加载的实现

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某

  • 分享一个精简的vue.js 图片lazyload插件实例

    这个插件未压缩版本只有7.62kb,很精简,支持img标签和background-img资源的lazyload.支持vue.js 1.0 和vue.js 2.0 安转 $ npm install vue-lazyload --save 使用方法 //main.js import Vue from 'vue' // import VueLazyload import VueLazyload from 'vue-lazyload' //use custom directive Vue.use(Vue

  • jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代

  • vue2组件实现懒加载浅析

    vue2组件实现懒加载浅析

    一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat

  • jquery.lazyload 实现图片延迟加载jquery插件

    什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil

  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc

  • JavaScript实现页面滚动图片加载(仿lazyload效果)

    JavaScript实现页面滚动图片加载(仿lazyload效果)

    为什么写这篇文章? 1.优化页面很实用的方法,技术实现不难: 2.搜索了相关内容的文章,好像都是用jQuery的方法,可是如果不用jQuery的站长难道就不能用这种方法了么: 3.做技术分享也是在让更多人帮自己测试,因为这个本人木有在项目中实际用到,都是自己琢磨的,所有如果有问题请大家指出,先谢谢了: 4.这个月的博客还没写: 5.刚好木有工作任务,此时不写更待何时... 现在的页面大多都具有的特点 - 内容丰富,图片较多:像我们经常浏览的淘宝,京东,团购网站之类的(本人网购控,属于一个月不在网

  • 详解vue2路由vue-router配置（懒加载）

    vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &

  • Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件

    从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包

  • Vue自定义图片懒加载指令v-lazyload详解

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

随机推荐