最近在使用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. 《Drools7.0.0.Final规则引擎教程》第3章 3.2 KIE API解析

    3.2.4 KieServices 该接口提供了很多方法,可以通过这些方法访问KIE关于构建和运行的相关对象,比如说可以获取KieContainer,利用KieContainer来访问KBase和KS ...

  2. Leetcode 986. Interval List Intersections

    暴搜.. class Solution(object): def intervalIntersection(self, A: List[Interval], B: List[Interval]) -& ...

  3. I.MX6 recovery mode hacking

    /******************************************************************************** * I.MX6 recovery m ...

  4. MpVue开发之框架的搭建

    npm install --global  vue-cli vue脚手架 vue init mpvue/mpvue-quickstart  my-project 创建一个基于mpvue-quickst ...

  5. HDU - 6129 :Just do it (杨辉三角)

    There is a nonnegative integer sequence a 1...n  a1...n of length n n . HazelFan wants to do a type ...

  6. 用JQuery写出登录弹出框

    类似百度的登录弹出框,可用jquery的fadeIn(),hide(),show(),slideDown()等动画函数实现,一下为html5 代码: <!DOCTYPE html> < ...

  7. Hadoop2.7.1安装与配置

    Hadoop2.7.1集群环境的搭建 s204.s205是我的两台服务器hostname,可以用你对应的ip或者hostname代替 工具/原料   jdk.ssh免登录 方法/步骤   1 首先去A ...

  8. [Luogu4169][Violet]天使玩偶/SJY摆棋子

    luogu 题意 一个平面上有\(n\)个点,\(m\)次操作,每次新增一个点,或者是询问离某个点最近的点的距离.这里的距离是曼哈顿距离. \(n,m\le3*10^5\) sol 写一发\(CDQ\ ...

  9. 转载FPGA学习之内嵌乘法器调用

    补充一点,除法的时候如果直接a/b那么就会调用lpm模块,不管输入是否是常数,乘法的时候输入都是reg型变量会调用硬件乘法器,有一个是常数就会调用lpm模块. 上课的时候一直听老师说真正实践的时候你别 ...

  10. 【学习笔记】Manacher算法

    本文部分图片来源 代码来源(代码是学姐哒.. 一.引入 Manacher算法是用来求最长回文子串的算法,时间复杂度O(n). 回文子串指的是''aacaa'',''noon'',这种正着反着读都一样的 ...