jQuery Lazy Load图片懒加载
传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github
使用方法:
1.引用js文件
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
2.修改HTML代码中需要修改的IMG标签
<!--
将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片)
添加 class="lazy" 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 jQuery 选择器
添加 width 和 height 属性有助于在图片未加载时占满所需要的空间
-->
<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480">
3.调用Lazy Load
$('img.lazy').lazyload();
jQuery Lazy Load图片懒加载的更多相关文章
- 用jquery写的图片懒加载
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- js可视区域图片懒加载
可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. html下载地址 <!DOCTYPE html ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- jquery 图片懒加载
jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=functi ...
- 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- jQuery的图片懒加载
jQuery的图片懒加载 function imgLazyLoad(options) { var settings = { Id: $('img'), threshold: 100, effectsp ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jQuery.imgLazyLoad图片懒加载组件
一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...
随机推荐
- easyui-datagrid单选模式下隐藏表头的全选框
easyui-datagrid可以不使用复选框来进行单选,直接使用onSelect和 singleSelect:true就可以实现单选,但是有一些用户会比较习惯使用勾选框,这时会加一列checkbox ...
- Android (shape,gradient)使用总结
设置背景色可以通过在res/drawable里定义一个xml,如下: <?xml version="1.0" encoding="utf-8"?> ...
- Linux下vsftp匿名用户配置
Linux下vsftp匿名用户上传和下载的配置 配置要注意三部分,请一一仔细对照: 1.vsftpd.conf文件的配置(vi /etc/vsftpd/vsftpd.conf) #允许匿名用户登录FT ...
- 爬虫:Scrapy9 - Feed exports
实现爬虫时最经常提到的需求就是能合适的保存爬取到的数据,或者说,生成一个带有爬取数据的“输出文件”(通常叫“输出 feed”),来供其它系统使用. Scrapy 自带了 Feed 输出,并且支持多种序 ...
- centos7安装Logwatch配合msmtp邮件客户端发送服务器监控分析日志
########################### #DATE 2016-07-29 # #Authur by Denilas Yeung ...
- [bzoj] 2716 天使玩偶 || CDQ分治
原题 已知n个点有天使玩偶,有m次操作: 操作1:想起来某个位置有一个天使玩偶 操作2:询问离当前点最近的天使玩偶的曼哈顿距离 显然的CDQ问题,三维分别为时间,x轴,y轴. 但是这道题的问题在于最近 ...
- freemarker的简单入门程序
本文主要介绍了freemarker的常用标签<#list> <#import> <#assign> <#if> <#else> &l ...
- 7月10日day2总结
今天学习过程和小结 上午: java项目建立方法,maven Tomcat的部署和MySQL的安装与权限. 分配时中datanote和namenote DataNode 作用 1Data Node以数 ...
- php命名空间与可变函数
命名空间一个最明确的目的就是解决重名问题,PHP中不允许两个函数或者类出现相同的名字,否则会产生一个致命的错误.这种情况下只要避免命名重复就可以解决 对于命名空间,官方文档已经说得很详细[查看],我在 ...
- [9018_1592]USACO 2014 Open Silver Fairphoto
题目描述 Farmer John's N cows (1 <= N <= 100,000) are standing at various positions along a long o ...