网页加载图片的时候有很多一起加载,我想要两颗西柚网页一个一个加载图片。一起加载的话很慢。

一个控制网页图片根据滚动条分屏渐显的Jquery插件(Jquery.LazyLoad)
最近见有朋友在群里面找一个可以控制网页图片根据滚动条滚动高度分屏渐显的插件(像淘宝之类的很多大站又运用了这种方式,来节省服务器HTTP请求,减少服务器带宽占用),之前也没关注过,后来在网上找了一下,找到了这个插件,先和大家分享下吧,相信很多朋友也都迫不及待吧。
插件名称:Jquery.LazyLoad.js
&&&jQuery.lazyLoad.js插件是一款基于jquery框架,可以实现图片“延迟加载”的插件。之所以将“延迟加载”是因为这个插件并非真的实现延迟加载!为什么这么说呢,其实用firebug的朋友就可以发现,所有图片都已经事先加载过了,只是Jquery.LazyLoad将其隐藏了而已,大家看完其工作原理后就明白了。
其工作原理是先在&img
/&下创建original属性,并把src属性值赋值给original,然后再把src的值修改成你设置的placeholder的值。当滚动条到达图片位置时,再把original的属性赋值给src。这个时候向服务器发出一个HTTP请求,确认下有没有修改,服务器返回一个304状态,等于本来一遍HTTP请求能完成的工作,它用了两遍,非但没有减少开支,还增加开销……
那么怎么修正呢?
&&&以下方法对于站点做SEO的朋友请略过,因为此做法对网站SEO有一定的影响。
打开这个jquery.lazyLoad.js,找到如下图第一个红框的代码,直接注释掉。第二个红框是需要自己手工添加上去的,然后保存。
在页面插入图片的代码如&img src=""
alt=""/&修改成&img
original=""
插入JS代码
$(document).ready(function(){
$("#main img").lazyload({
&&&&&&&&&&&&&&
placeholder : "",&&&&&&&
&&&&&&&&&&&&&&
effect : "fadeIn"
这样Jquery.LazyLoad就修改完成了,网页图片也不会事先加载了,当滚动条滚动到图片位置时,图片就会显示出来了。
此问题还没有得到验证,使用前记得验证一下
已投稿到:
以上网友发言只代表其个人观点,不代表新浪网的观点或立场。通过jquery.lazyload.js脚本插件实现图片随滚动条渐显的华丽效果。可加速多图片页面的载入速度,让其尽快显示在浏览者眼前。特适用于存在大量图片的页面.
实现原理:
jquery.lazyload.js是一个用 JavaScript 编写的 jQuery 插件。它可以延迟加载长页面中的图片,通过判断浏览者是否在查看当前图片,若不是则默认加载预设的填充图片“grey.gif”,直到浏览者滑动鼠标滚轮或浏览到图片位置时,真正的图片才会得以加载。
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度。浏览器将会在加载可见图片之后即进入就绪状态。在某些情况下还可以帮助降低服务器负担。
实现方法:
只需在网站页面头部加入js代码即可实现。
1、下载并上传相关文件
下载 预填充图片
下载完毕后,上传上述3个文件到wordpress的相关目录。
注:若之前已使用相关jquery.js,则不需要下载jquery-1.4.2.min.js
2、在当前主题的“header.php”中适当位置添加下面JS调用代码。
&script type=&text/javascript& src=&域名路径/jquery.lazyload.js&&&/script&
&script type=&text/javascript&&
jQuery(document).ready(
function($){
$(&img&).lazyload({
placeholder : &域名路径/grey.gif&,
effect      : &fadeIn&
注:“域名路径”自己替换成相关路径。
$(&img&) 可以用来限定对页面中的哪些img生效,如只针对内容部分可修改为 $(&.content img&) 。
转载请注明出处: &我做了一个网页,但是里面图片有点多,想让页面全部加载好一起显示,不要慢慢的一个个出来_百度知道网页加载图片的时候有很多一起加载,我想要网页一个一个加载图片。一起加载的话很慢。_百度知道}

我要回帖

更多关于 我想要投资网 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信