使用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延迟加载图片的使用方法
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过 ...
随机推荐
- [QT][问题]关于QT语言家使用失败的原因之一
按照标准的qt使用教程 ( http://www.qter.org/forum.php?mod=viewthread&tid=781 ) 实践了下,发现除去主界面外,点开的窗口多语言没有问题. ...
- NIO:异步非阻塞I/O,AIO,BIO
Neety的基础使用及说明 https://www.cnblogs.com/rrong/p/9712847.html BIO(缺乏弹性伸缩能力,并发量小,容易出现内存溢出,出现宕机 每一个客户端对应一 ...
- python 函数 hex()
hex(x)作用:hex() 函数用于将10进制整数转换成16进制整数. x-10进制整数,返回16进制整数 实例: >>>hex(255) '0xff' >>> ...
- Mouse without Borders 跨屏鼠标
Mouse without Borders 跨屏鼠标 软件方式 当你有几台电脑同时工作时,不停的换鼠标和键盘是非常不方便的. 如果用的 Mouse without Borders 就不一样了,可以在多 ...
- 64位linux下rpm安装mysql的5.5.55版本
昨天同事开了个阿里云环境,让我帮他安装mysql数据库,本想着很简单的一件事,结果还是折腾了一番.坑很多,一路趟过,一个接一个,只能硬着头皮冲. 首先是下载压缩包,因为采用了rpm安装方式,所以下载的 ...
- nginx安装及编译参数详解
1.centos下Yum安装 Nginx yum list|grep nginx 发现没有可用的结果通过创建下面的文件在系统中添加nginx仓库的yum配置vi /etc/yum.repos.d/ng ...
- 【转】wireshark抓包工具详细说明及操作使用
wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示网络封包的详细信息.使用wireshark的人必须了解网络协议,否则就看不懂wireshark了. 为了安全 ...
- 安装jenkins 的时候 记录默认密码文件为空的情况
1.把文件的权限改成 chmod 777 .jenkins/secrets/initialAdminPassword 然后再使用编辑器打开,密码就出来的 密码文件的地址 /var/root/.hud ...
- java实例三维空间求点之间的距离。。。。
package com.b; public class Ponit { private double x; private double y; private double z; public Pon ...
- atorg.apache.hadoop.io.nativeio.NativeIO$Windows.access(NativeIO.java:557)
错误原因: 你当前开发环境中{Hadoop_HOME}\bin\hadoop.dll 文件和你当前的hadoop版本不匹配. 解决方案: 网络下载相应版本的hadoop.dll,并将该文件放入c:\ ...