异步加载 lazyload.js的简单用法

jQuery有款插件lazyload正适合我的需求,拿来试下效果不错!下面把简单用法和要注意的问题分享下:

HTML:

 代码如下 复制代码
<img  src=”img/grey.gif” data-original=”yun_qi_img/baidu_jgylogo3.gif”  width=”100″  height=”120″ />

1. src属性值为占位图地址
2. 原图地址存放在 “data-original” 属性中,待需赋还给src
3. 图片最好要加宽度、高度属性
JS:

 代码如下 复制代码
<script type=”text/javascript” src=”../js/jquery1.7.js”></script>
<script type=”text/javascript” src=”../js/LazyLoad.js”></script>
<script type=”text/javascript” >
时间: 2024-11-03 22:35:07

异步加载 lazyload.js的简单用法的相关文章

异步加载:ControlJS让脚本加载更快的一个模块

文章简介:关于ControlJs的使用和基础讲解. 关于ControlJs一共有三篇文章,这是第一部分.ControlJS是让脚本加载更快的一个模块(a javascript module for making scripts load faster). 三篇文章的结构分别为: 1. async loading2. delayed execution3.overriding document.write关于第一部分的异步加载,这个的关键在于尽快将页面作为html绘制出来,然后再用javascri

在Android的应用中实现网络图片异步加载的方法_java

前言其实很幸运,入职一周之后就能跟着两个师兄做android开发,师兄都是大神,身为小白的我只能多多学习,多多努力.最近一段时间都忙的没机会总结,今天刚完成了android客户端图片异步加载的类,这里记录一下(ps:其实我这里都是参考网上开源实现) 原理在ListView或者GridView中加载图片的原理基本都是一样的:     先从内存缓存中获取,取到则返回,取不到进行下一步     从文件缓存中获取,取到则返回并更新到内存缓存,取不到则进行进行下一步     从网络上下载图片,并更新内存缓

Android实现从缓存中读取图片与异步加载功能类_Android

本文实例讲述了Android实现从缓存中读取图片与异步加载功能类.分享给大家供大家参考,具体如下: 在新浪微博的微博列表中的图片,为了加速其显示也为了加快程序的响应,可以参考该图片异步加载类实现. public class AsyncImageLoader { //SoftReference是软引用,是为了更好的为了系统回收变量 private HashMap<String, SoftReference<Drawable>> imageCache; public AsyncImag

前端性能优化:使用异步加载,延迟加载依赖

 来源:GBin1.com RequireJS已经迎来了异步加载和AMD格式的巨大浪潮.XMLHttpRequest(该对象可以调用AJAX)使得资源的异步加载变得流行起来,它允许无阻塞资源加载,并且使 onload 启动更快,允许页面内容加载,而不需要刷新页面. 我所用的异步加载器是John Hann的curl.curl加载器是基本的异步加载器,可以被配置,拥有很好的插件.以下是一小段curl的代码: // 基本使用: 加载一部分AMD格式的模块 curl(['social', 'dom'],

javascript 文件的同步加载与异步加载

原文:[转载]javascript 文件的同步加载与异步加载   HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行.除IE和较新版本的Firefox外,其他浏览器并未支持. language: 已废弃.大部分浏览器会忽略该值. src: 可选.指定引入的外部

Android实现图片缓存与异步加载_Android

ImageManager2这个类具有异步从网络下载图片,从sd读取本地图片,内存缓存,硬盘缓存,图片使用动画渐现等功能,已经将其应用在包含大量图片的应用中一年多,没有出现oom. Android程序常常会内存溢出,网上也有很多解决方案,如软引用,手动调用recycle等等.但经过我们实践发现这些方案,都没能起到很好的效果,我们的应用依然会出现很多oom,尤其我们的应用包含大量的图片.android3.0之后软引用基本已经失效,因为虚拟机只要碰到软引用就回收,所以带不来任何性能的提升. 我这里的解

javascript 文件的同步加载与异步加载实现原理_javascript技巧

HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行.除IE和较新版本的Firefox外,其他浏览器并未支持. language: 已废弃.大部分浏览器会忽略该值. src: 可选.指定引入的外部代码文件,不限制后缀名. type: 必选.指定脚本的内容类型(M

用jQuery的AJax实现异步访问、异步加载_jquery

本篇文章实现了用jQuery的AJax实现异步访问和异步加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. [异步访问] 用一个例子用以说明:点击按钮,将input内用户输入的数据发送给服务端,并将结果返回给页面. 首先是html承载内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步访问<

Javascript vue.js表格分页,ajax异步加载数据_基础知识

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu