jquery图片延迟加载方案解决图片太多加载缓慢问题
当在做一个图片展示站的时候,一个页面加载的图片过多会,如果服务器的带宽跟不上,明显会感觉到页面很卡,严重的浏览器也会崩溃,所以我推荐采用即看即所得的模式,当滚动到下一屏时才进行加载图片。
注意:即便如此,也希望保持图片的大小不要太大,例如上传一个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图片延迟加载方案解决图片太多加载缓慢问题的更多相关文章
- 解决Typecho Gravatar头像加载缓慢的问题
前言 Typecho评论默认使用的是Gravatar头像,但因为Gravatar网站总是被墙,导致页面加载被拖慢,而且加载半天也还是个裂图,太影响心情,所以我们可以不使用Gravatar头像,换成另一 ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- UIImage加载图片的方式以及Images.xcassets对于加载方法的影响
UIImage加载图片的方式以及Images.xcassets对于加载方法的影响 图片缓存 根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imageName ...
- jquery mobile 请求数据方法执行时显示加载中提示框
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...
- 利用Jquery的load函数实现页面的动态加载
利用Jquery的load函数实现页面的动态加载 js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...
- html网页引用中文字体,解决加载缓慢办法
[ttf 压缩]html网页引用中文字体,文件过大,加载缓慢的解决办法[字蛛][web font] [字蛛]http://font-spider.org/ 先安装好 NodeJS,然后执行: npm ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- 解决 Visual Studio 符号加载不完全问题
解决 Visual Studio 符号加载不完全问题 工具 - 选项 - 搜索 "符号" - 选上服务器 | 加载所有符号, 之后符号就会显示完全
- 解决页面初始化vue加载代码问题
<style type="text/css"> /* 解决页面初始化vue加载代码问题 */ [v-cloak] { display: none; } </sty ...
随机推荐
- Mongo副本集搭建
解压mongodb-linux-x86_64-rhel70-3.2.0.tgz 将解压后的bin路径添加到系统环境变量,保证mongo.mongod等命令可用 创建副本集目录mongo/27017.2 ...
- SGD中的重要参数
Learning Rate 学习率决定了权值更新的速度,设置得太大会使结果超过最优值,太小会使下降速度过慢.仅靠人为干预调整参数需要不断修改学习率,因此后面3种参数都是基于自适应的思路提出的解决方案. ...
- Hadoop生态圈-phoenix完全分布式部署以及常用命令介绍
Hadoop生态圈-phoenix完全分布式部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. phoenix只是一个插件,我们可以用hive给hbase套上一个JDBC壳,但是你 ...
- Xcode关闭警告
对于关闭某个警告,如果需要全局关闭的话,直接在Other C Flags里写 -Wno-...就行了,比如 -Wextra -Wno-sign-compare 就是一个常见的组合.如果相对某几个文件开 ...
- Mongodb 笔记02 创建、更新和删除文档
创建.更新和删除文档 1. 插入并保存: 1). 单条插入,insert : db.foo.insert({"bar":"baz"}) 2). ...
- new FileInputStream(file)中file不能为文件夹
今天闲来无事,写了如下程序: package com.xhj.test; import java.io.File; import java.io.FileFilter; import java.io. ...
- SQL语句(十五)视图
视图 实际上是一个查询语句, 如果将子查询保存为视图, 就可以将子查询的结果当作数据表使用 从而来简化查询语句 引言 例1 查询参加"数据库技术"课程的考试的学生学号.姓名.班级. ...
- 非常强力的reduce
Array 的方法 reduce 是一个有非常多用处的函数. 它一个非常具有代表性的作用是将一个数组转换成一个值.但是你可以用它来做更多的事. 1.使用"reduce"代替&quo ...
- 《设计模式》-原则三:依赖倒置原则(DIP)
这几天晚上回来都去玩了!没有坚持学习.真的好惭愧! 非常自责 后面一定要坚持 一气呵成 争取每天学一点,把这个学完. 今天主要是看了一下 设计模式中的 原则三: 依赖倒置原则(DIP) 官方是这样 ...
- 如何开启一个Django项目
一:新建的Django工程 新建了一个Django工程后,工程会自动创建有两个templates文件夹和unitled文件夹,再加上一个manage.py文件. 二:Django开发的一般流程 在工程 ...