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

注意:即便如此,也希望保持图片的大小不要太大,例如上传一个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. Mongo副本集搭建

    解压mongodb-linux-x86_64-rhel70-3.2.0.tgz 将解压后的bin路径添加到系统环境变量,保证mongo.mongod等命令可用 创建副本集目录mongo/27017.2 ...

  2. SGD中的重要参数

    Learning Rate 学习率决定了权值更新的速度,设置得太大会使结果超过最优值,太小会使下降速度过慢.仅靠人为干预调整参数需要不断修改学习率,因此后面3种参数都是基于自适应的思路提出的解决方案. ...

  3. Hadoop生态圈-phoenix完全分布式部署以及常用命令介绍

    Hadoop生态圈-phoenix完全分布式部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. phoenix只是一个插件,我们可以用hive给hbase套上一个JDBC壳,但是你 ...

  4. Xcode关闭警告

    对于关闭某个警告,如果需要全局关闭的话,直接在Other C Flags里写 -Wno-...就行了,比如 -Wextra -Wno-sign-compare 就是一个常见的组合.如果相对某几个文件开 ...

  5. Mongodb 笔记02 创建、更新和删除文档

    创建.更新和删除文档          1. 插入并保存: 1). 单条插入,insert : db.foo.insert({"bar":"baz"}) 2). ...

  6. new FileInputStream(file)中file不能为文件夹

    今天闲来无事,写了如下程序: package com.xhj.test; import java.io.File; import java.io.FileFilter; import java.io. ...

  7. SQL语句(十五)视图

    视图 实际上是一个查询语句, 如果将子查询保存为视图, 就可以将子查询的结果当作数据表使用 从而来简化查询语句 引言 例1 查询参加"数据库技术"课程的考试的学生学号.姓名.班级. ...

  8. 非常强力的reduce

    Array 的方法 reduce 是一个有非常多用处的函数. 它一个非常具有代表性的作用是将一个数组转换成一个值.但是你可以用它来做更多的事. 1.使用"reduce"代替&quo ...

  9. 《设计模式》-原则三:依赖倒置原则(DIP)

    这几天晚上回来都去玩了!没有坚持学习.真的好惭愧! 非常自责 后面一定要坚持 一气呵成  争取每天学一点,把这个学完. 今天主要是看了一下  设计模式中的 原则三: 依赖倒置原则(DIP) 官方是这样 ...

  10. 如何开启一个Django项目

    一:新建的Django工程 新建了一个Django工程后,工程会自动创建有两个templates文件夹和unitled文件夹,再加上一个manage.py文件. 二:Django开发的一般流程 在工程 ...