使用jq.lazyload.js,解决设置loading图片的问题
最近在使用lazyload的时候,遇上一个问题。当对img做宽100%时,就是placeholder的loading图片也会100%宽,这样一般来说loading图片就会变得很大。实在是不能应用到项目里。后来发现一个折中的解决方法,如下。
1.对img.lazy设置背景图片,把loadding图片设为其背景图片。给任意最小高度。

2.在lazyload初始话时设置placeholder,赋予其任意大小的一张透明图片。这样即可解决loading变大的问题。
$("img.lazy").lazyload({
placeholder: "images/placeholder.png",
//effect: "fadeIn",
event: "sporty",
failure_limit : 10,
container: $(".content")
});
ps:使用fadeIn时可能会跟swiper发生冲突,我使用的版本swiper2.7。
使用jq.lazyload.js,解决设置loading图片的问题的更多相关文章
- DD_belatedPNG.js解决透明PNG图片背景灰色问题
<!--[]> <script type="text/javascript" src="http://www.phpddt.com/usr/themes ...
- 图片懒加载之lazyload.js插件使用
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...
- 图片懒加载lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- jquery解决file上传图片+图片预览
js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...
- 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件
前 言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...
- Jquery.LazyLoad.js实现图片延迟加载功能
从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了 ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- jquery插件lazyload.js延迟加载图片的使用方法
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过 ...
随机推荐
- canvas - 饼状图
<!DOCTYPE html> <html> <head> <title>Canvas测试</title> <meta charset ...
- P4简介:数据平面的编程语言
15-05-29 http://p4.org/join-us/ 由两位SDN大师----来自普林斯顿的Jennifer Rexford和斯坦福的Nick McKeown---- 共同 ...
- 人生苦短之我用Python篇(基础)
Python简介 Python,是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年. Python是纯粹的自由软件, ...
- HihoCoder 1053 : 居民迁移 二分+贪心+双指针(好题)
居民迁移 时间限制:3000ms 单点时限:1000ms 内存限制:256MB 描述 公元2411年,人类开始在地球以外的行星建立居住点.在第1326号殖民星上,N个居住点分布在一条直线上.为了方便描 ...
- ajax传递数组后台接收不到值的问题
背景: JQGrid需要进行批量删除操作传给后台的是数组,结果后台接收不到值. 后台语言:java 原因: ajax传递参数时,traditional 默认为false,JQuery会深度序列化参数对 ...
- bzoj 1004 [HNOI2008]Cards && poj 2409 Let it Bead ——置换群
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1004 http://poj.org/problem?id=2409 学习材料:https:/ ...
- UniDac 使用日记(转)
UniDAC使用日记 1. UniQuery默认状态为行提交,使用前根据需要设置readonly或cachedupdates属性 2. UniQuery.Filter默认大 ...
- qt的下载地址
上Qt官网http://www.qt.io/download/想下载Qt,速度很慢,在这里记录下在Qt官网看到的镜像下载地址: 1. 所有Qt版本下载地址: http://download.qt.io ...
- Docker Toolbox on Windows 7
1,下载DockerToolbox,可选daocloud或官网下载 https://get.daocloud.io/toolbox/ 2,配置虚拟机路径环境变量,避免系统C盘,很占空间 MACHINE ...
- 蓝桥杯 算法训练 ALGO-50 数组查找及替换
算法训练 数组查找及替换 时间限制:1.0s 内存限制:512.0MB 问题描述 给定某整数数组和某一整数b.要求删除数组中可以被b整除的所有元素,同时将该数组各元素按从小到大排序.如果数组元 ...