当在做一个图片展示站的时候,一个页面加载的图片过多会,如果服务器的带宽跟不上,明显会感觉到页面很卡,严重的浏览器也会崩溃,所以我推荐采用即看即所得的模式,当滚动到下一屏时才进行加载图片。

注意:即便如此,也希望保持图片的大小不要太大,例如上传一个1M的图 在页面中显示,当有100张时,可想而知,100M的图片需要加载,所以推荐将图片进行裁剪或者压缩处理展示,特别是列表页!

<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript" src="jquery.scrollstop.js"></script>
$(function(){
    //延迟加载图片
    $("img.lazy_load").lazyload({
      event: "scrollstop", //滚动加载
      effect : "fadeIn" //淡入
    });
})
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>
<img src='1.jpg' class='lazy_load'/>

jquery图片延迟加载方案解决图片太多加载缓慢问题的更多相关文章

  1. 解决Typecho Gravatar头像加载缓慢的问题

    前言 Typecho评论默认使用的是Gravatar头像,但因为Gravatar网站总是被墙,导致页面加载被拖慢,而且加载半天也还是个裂图,太影响心情,所以我们可以不使用Gravatar头像,换成另一 ...

  2. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  3. UIImage加载图片的方式以及Images.xcassets对于加载方法的影响

    UIImage加载图片的方式以及Images.xcassets对于加载方法的影响 图片缓存 根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imageName ...

  4. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  5. 利用Jquery的load函数实现页面的动态加载

    利用Jquery的load函数实现页面的动态加载  js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...

  6. html网页引用中文字体,解决加载缓慢办法

    [ttf 压缩]html网页引用中文字体,文件过大,加载缓慢的解决办法[字蛛][web font] [字蛛]http://font-spider.org/ 先安装好 NodeJS,然后执行: npm ...

  7. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  8. 解决 Visual Studio 符号加载不完全问题

    解决 Visual Studio 符号加载不完全问题 工具 - 选项 - 搜索 "符号" - 选上服务器 | 加载所有符号, 之后符号就会显示完全

  9. 解决页面初始化vue加载代码问题

    <style type="text/css"> /* 解决页面初始化vue加载代码问题 */ [v-cloak] { display: none; } </sty ...

随机推荐

  1. ElasticStack系列之七 & IK自动热更新原理与实现

    一.热更新原理 elasticsearch开启加载外部词典功功能后,会每60s间隔进行刷新字典.具体原理代码如下所示: public void loadDic(HttpServletRequest r ...

  2. 源码中transient的用途

    Java的serialization提供了一种持久化对象实例的机制.当持久化对象时,可能有一个特殊的对象数据成员,我们不想用serialization机制来保存它.为了在一个特定对象的一个域上关闭se ...

  3. 服务器IP安全策略限制网络访问

    https://jingyan.baidu.com/article/3c343ff714d4890d377963cd.html https://www.icbase.com/TestGetUrl.as ...

  4. java 锁的分类

    java中为了解决多线程并发带来的线程安全问题,引入了锁机制. 一.公平锁和非公平锁 1.公平锁:按照申请锁的顺序(FIFO队列)来获取锁. 2.非公平锁:所有线程都会竞争,获取的锁的顺序和申请顺序无 ...

  5. git爬坑不完全指北(二):failed to push some refs to ‘XXX’的解决方案

    报错分析        从字面理解,这个报错的意思就是说远程仓库里有一个改动是本地仓库里没有的,所以在push前要先把远程仓库上的改动pull或者fetch到本地仓库.然后再执行push的操作,把本地 ...

  6. Tomcat——Tomcat使用详解

    Tomcat简介 官网:http://tomcat.apache.org/ Tomcat GitHub 地址:https://github.com/apache/tomcat Tomcat是Apach ...

  7. Vue入坑教程(二)——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...

  8. MapReduce (hive表SequenceFile的结果做输入)、MultipleOutputs和Reduce端迭代iterable的一些说明

    很长时间以来一直写hive,嵌套脚本.偶尔写UDF.  最近用Hive的dynamic partition和多路插入做一些事情,很遗憾的结果是非常不稳定,有时能成功,有时失败.(可能是因为hive版本 ...

  9. window环境下使用sbt编译spark源码

    前些天用maven编译打包spark,搞得焦头烂额的,各种错误,层出不穷,想想也是醉了,于是乎,换种方式,使用sbt编译,看看人品如何! 首先,从官网spark官网下载spark源码包,解压出来.我这 ...

  10. python作业ATM(第五周)

    作业需求: 额度 15000或自定义. 实现购物商城,买东西加入 购物车,调用信用卡接口结账. 可以提现,手续费5%. 支持多账户登录. 支持账户间转账. 记录每月日常消费流水. 提供还款接口. AT ...