使用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延迟加载图片的使用方法
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过 ...
随机推荐
- NHibernate的几种查询方式
SQL:普通SQL查询(也就是SQLServer,Oracle,Sybase等数据库的查询语句,建议使用基于TSQL-92) 核心对象:CreateSQLQuery IList list = sess ...
- 使用 DocFX 生成 .Net/Unity项目文档
孙广东 2017.5.27 http://blog.csdn.NET/u010019717 微软开源全新的文档生成工具DocFX 类似JSDoc或Sphinx 如何使用看 : http: ...
- Android 如何快速生成aar?
aar主要分为两步 第一步 新建一个Module类似于Eclipse中的project 然后AddLibrary然后点击Finish完成 生成mylibrary-debug.aar文件 然后将.aar ...
- matlab将矩阵写入文件
% %% date: 5/5/2017 % %% Author: Congbo Ma, Hu Wang % % write matrix to file function wrt_mat_to_fil ...
- JavaScript 中 this:
在绑定事件时,this指定的是被绑定的那个html元素,比如: 结果: press里的this指的就是canvas.
- asp.net 禁止回车输入
//只在输入框禁止输入回车 if(event.keyCode==13&&event.srcElement.type=="textarea") { ...
- 进程(并发,并行) join start 进程池 (同步异步)
一.背景知识 顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象.进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其他所有 ...
- 剑指Offer面试题:1.实现单例模式
一 题目:实现单例模式Singleton 题目:设计一个类,我们只能生产该类的一个实例. 只能生成一个实例的类是实现了Singleton(单例)模式的类型.由于设计模式在面向对象程序设计中起着举足轻重 ...
- 在web.config中配置httpHandlers节点是的说明
<system.web> <httpHandlers> <add verb="*" path="*.lcj" type=" ...
- Collections排序
0.前言 ThreeSet的底层实现是红黑树,它在创建set的过程中实现排序.Collections.sort是在对整个集合进行排序,按道理来说使用TreeSet插入集合元素直至建立整个TreeSet ...