最近在使用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图片的问题的更多相关文章

  1. DD_belatedPNG.js解决透明PNG图片背景灰色问题

    <!--[]> <script type="text/javascript" src="http://www.phpddt.com/usr/themes ...

  2. 图片懒加载之lazyload.js插件使用

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...

  3. 图片懒加载lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  4. lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  5. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  6. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  7. Jquery.LazyLoad.js实现图片延迟加载功能

    从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了 ...

  8. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  9. jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过 ...

随机推荐

  1. Illumina Fastq Q-score

    Illumina Nextseq500 Miseq HiseqXten 测序仪 Q-score均采用下面的编码格式,仅作简要介绍. Q-score Q-score 在fastq中每个序列的第4行,代表 ...

  2. ngxtop实时监控nginx状态

    ngxtop实时解析nginx访问日志,并且将处理结果输出到终端,功能类似于系统命令top,所以这个软件起名ngxtop.有了ngxtop,你可以实时了解到当前nginx的访问状况,再也不需要tail ...

  3. 智能电视软件安装(WIFI上网)

    智能电视软件上网(电视可连接无线网的称之为:智能电视) 1.安装当贝市场 链接:http://www.dangbei.com/ 2.安装电视家浏览器 链接:http://www.tvapk.net/f ...

  4. bzoj 2282 消防

    Written with StackEdit. Description 某个国家有\(n\)个城市,这\(n\)个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为\(z_i(z_i ...

  5. 1.1对java web开发的一点理解

    前言 Q:通常行内人士见面会问你,你做哪方面开发的? A:java web开发的 那么,什么是java web开发? java web开发通常是指java web应用程序的开发.一个B/S架构的 we ...

  6. 9 闭包——《Swift3.0从入门到出家》

    8  闭包 Swift语言中可以使用一块独立代码块替代函数的定义,称独立的代码块为闭包 闭包格式为: {(参数列表)->返回值类型    in 执行语句 } 例子: <1>使用闭包实 ...

  7. 连续创建多个Oracle触发器失败,单个创建才成功的解决方法

    当用到自增序列,需要用到触发器的时候,当我连续执行创建多个触发器时,总是报编译通过,但存在警告或错误. ---.应用信息 drop table app_info cascade constraints ...

  8. Diffie-Hellman 密钥交换

    假定有两个全局公开的参数,分别为一个素数p和一个整数g,g是p的一个原根,为了协商共享的会话密钥: 首先,用户A随机选取a,计算出A = g^a mod p,并将A发送给B:然后,用户B随机选取b,计 ...

  9. (转)WebApi 上传文件

    本文转载自:http://www.cnblogs.com/zj1111184556/p/3494502.html public class FileUploadController : ApiCont ...

  10. SQL万能密码:' or 1='1

    select name,pass from tbAdmin where name='admin' and pass='123456' 输入用户名:' or 1='1 SQL变成下面这个样子: sele ...