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 ...
随机推荐
- Docker应用四:搭建docker镜像仓库(包括自生成https证书、登陆认证)
利用docker官网提供的registry镜像创建私有仓库 一.首先从docker官网拉取registry镜像: docker pull registry 二.然后运行该镜像: docker run ...
- 重定向(Redirect)相关的几个问题
转载自:http://hi.baidu.com/fboosjgvuvckore/item/405a1cd7be2c36e3795daa8b 此次挂接用户中心,交互大都通过重定向(Redirect)实现 ...
- 科学计算三维可视化---Mlab基础(常用控制函数)
- Java并发编程原理与实战三十:CountDownLatch与CyclicBarrier 区别
相信每个想深入了解多线程开发的Java开发者都会遇到CountDownLatch和CyclicBarrier,大家也在网上看到各种介绍原理,代码的,以及他们区别(应付面试)的,但是很少能讲清楚:他们到 ...
- session使用
Session的声明与使用 Session的设置不同于Cookie,必须先启动,在PHP中必须调用session_start().session_start()函数的语法格式如下: Bool sess ...
- C语言编写守护进程
概念 守护进程(daemon)是一种运行在后台的一种特殊的进程,它独立于控制终端并且周期性的执行某种任务或等待处理某些发生的事件.由于在Linux中,每个系统与用户进行交流的界面成为终端,每一个从此终 ...
- celery简介
目录 Celery简介 Celery架构 中间件选择 Celery序列化 简单项目 Celery简介 celery userguide 知乎大神解释celery Celery(芹菜)是基于Python ...
- 使用mysql的SUBSTRING_INDEX函数解决项目中编码非重复问题的实现方案!
一 SUBSTRING_INDEX函数介绍 作用:按关键字截取字符串 substring_index(str,delim,count) 说明:substring_index(被截取字段,关键字,关键字 ...
- java7与java8中计算两个日期间隔多少年多少月多少天的实现方式
最近工作中碰到个新需求,计算每个员工入职公司的时长,要求形式为多少年多少月多少天形式,某个值为0就跳过不显示,因为前段时间学习过java8新特性,对于这个需求,java8的新时间日期API可以直接解决 ...
- 【codeforces】【比赛题解】#950 CF Round #469 (Div. 2)
剧毒比赛,至少涨了分对吧.: ( [A]Left-handers, Right-handers and Ambidexters 题意: 有\(l\)个右撇子,\(r\)个左撇子,\(a\)个双手都惯用 ...