使用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延迟加载图片的使用方法
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过 ...
随机推荐
- int 21h 汇编
INT 21H 指令说明及使用方法 转自http://www.cnblogs.com/ynwlgh/archive/2011/12/12/2285017.html 很多初学汇编语言的同学可能会对INT ...
- 作为一名Java开发工程师需要掌握的专业技能
在学习Java编程完之后,学员们面临的就是就业问题.作为一名Java开发工程师,企业在招聘的时候,也是有一定的标准的. 为了帮助大家更好的找到适合自己的工作,在这里分享了作为一名Java开发工程师需要 ...
- Logical standby database 搭建(配置)
说明 Logical standby 数据库是通过Physical standby数据库转换的.本Logical standby是通过之前创建的Physical standby转换的. Physica ...
- CALayer 实现的动画效果(一)
先看下效果图: (备注: 上面GIF 是Mac 下录制视频的并转化成gif 的而成,工具为GIF Brewery 3 [这款软件挺不错的]) 那么主题来了如何实现上面效果呢? 1.创建自定义CALay ...
- iOS 10 隐私权限设置
iOS 10 开始对隐私权限更加严格,如果你不设置就会直接崩溃,现在很多遇到崩溃问题了,一般解决办法都是在info.plist文件添加对应的Key-Value就可以了. 以上Value值,圈出的红线部 ...
- install OS from usb
https://unetbootin.github.io/ https://rufus.akeo.ie/
- saas服务提供商
这段时间接触了不少行业的东西,这里谈几点肤浅的看法.从市场行情上讲,SaaS风口还在,不过热度明显向大数据.物联网.人工智能.区块链等转移. 做得比较好的有这些SaaS提供商,每个领域的都有那么几家的 ...
- 如何在已经安装好的Nginx上增加新模块
学习资源: https://blog.csdn.net/dxm2025/article/details/41149865 https://blog.csdn.net/qq_36663951/artic ...
- POJ1325(最小顶点覆盖)
Machine Schedule Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14429 Accepted: 6153 ...
- 【转】 Pro Android学习笔记(九二):AsyncTask(1):AsyncTask类
文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件.转载须注明出处:http://blog.csdn.net/flowingflying/ 在Handler的学习系列中,学习了如何h ...