最近在使用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. Android系统自带分享功能的实现(可同时分享文字和图片)

     /** * 分享功能 * * @param context * 上下文 * @param activityTitle * Activity的名字 * @param msgTitle * 消息标题 ...

  2. C++使用初始化列表的方式来初始化字段

    几个月之前,接触Android recovery源代码的时候,看ScreenRecoveryUI类的时候,那时候C++基础还不是特别好,一直不明白以下的初始化方式: 下面这个是Recovery的一个构 ...

  3. 初识django框架

    django框架 1.框架介绍 根据第一部分内容介绍,我们可以总结出一个web框架应该包含如下三部分:a.sockect服务.b.根据不同的url调用不同函数(包含逻辑).c.返回内容(模板渲染).常 ...

  4. InpOutx64 替代 winIOx64

    /***************************************************************************** * InpOutx64 替代 winIOx ...

  5. 【Python系统学习】基础篇

    这次真的是最后一次了!第三次滚Python的基础.走了太多弯路.认真一点!菜鸟! 教程 转义字符 \ 可以转义很多字符,比如\n表示换行,\t表示制表符,字符\本身也要转义,所以\\表示的字符就是\ ...

  6. web应用程序安全攻防---sql注入和xss跨站脚本攻击

    kali视频学习请看 http://www.cnblogs.com/lidong20179210/p/8909569.html 博文主要内容包括两种常见的web攻击 sql注入 XSS跨站脚本攻击 代 ...

  7. Dijkstra算法(带路径模板)

    个人心得:Dijkstra算法是贪心思想的一种延伸,注意路径pre,pre数组表示此时最短路径中的前一个顶点.每次更新到目的点时更新: 从源点出发,更新路径,然后找出此时最短的点,然后以这个点为头,看 ...

  8. C#编程的几个建议

    1.属性(properties) 抽象属性可以放在接口的定义里.如: public interface INameValuePair<T>     {         string Nam ...

  9. 对Tornado异步操作Sqlalchemy方法的选定 不错

    使用原因 在一个实时通讯的项目中,由于需要使用Websocket这一协议,便在Python框架中选定了Tornado,也同时使用了Sqlalchemy这一ORM框架. 大家都知道Tornado有异步非 ...

  10. [转]linux下查看进程内存使用情况

    动态查看一个进程的内存使用 1.top命令 top -d 1 -p pid [,pid ...] //设置为delay 1s,默认是delay 3s 如果想根据内存使用量进行排序,可以shift + ...