关于分屏加载图片,像天猫、京东等电商图片较多页面很长,就采用了延迟加载技术。

目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的,

随着页面的滚动,显示区域图片才被动态加载。

原理其实很简单,默认<img>标签中设置一个特别小的让人看不见的图片作为原始src路径,

再自定义一个属性存放原图片路径,通过绑定滚动事件,检查当前元素是否在浏览器窗口中,

然后替换src路径动态加载图片。

找了几个jquery插件都不太好用,kissy没用明白。

最后发现了一个大神写的jQuery滚动加载插件scrollLoading测试很好用。

再这里分享下~

下载demo。

Jquery.ScrollLoading图片延迟加载技术的更多相关文章

  1. 图片延迟加载技术-Lazyload的应用

    我们在浏览图片量非常大的页面时,像淘宝商城商品展示.必应图片搜索这类网站,图片的加载非常流畅,其中就应用了图片延迟加载技术.本文讲解Lazyload图片加载插件,当我们打开页面时,首先在屏幕可视区域加 ...

  2. 使用jquery插件实现图片延迟加载技术(懒加载)

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  3. jquery Loading图片延迟加载特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Jquery 图片延迟加载技术

    参考网址:http://code.ciaoca.com/jquery/lazyload/ 延迟加载能大大增加你网站的加载速度! 需要引入以下文件<Jq文件也是少不了的>: <scri ...

  5. jQuery实现图片延迟加载

    html: <img src ="占位图路径" data-original="真实图片路径" /> js: $("img").l ...

  6. JQuery.lazyload 图片延迟加载

    1.引入  jquery.lazyload.js 2. 延时加载的方式 <script type="text/javascript">  $(function() {  ...

  7. JQuery图片延迟加载插件,动态获取图片长宽尺寸

    以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...

  8. jquery图片延迟加载 及 serializeArray、serialize用法记录

    1.使用jquery实现 图片延迟加载 由于用户访问页面需要加载很多的图片,延迟加载技术在电子商务网站领域越来越普及,淘宝商城,京东商城,凡客等访问量巨大的电子商务站点为了增加用户用户体验,访问速度以 ...

  9. 图片延迟加载jquery插件imgLazyLoading

    实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...

随机推荐

  1. IOS设计模式浅析之外观模式(Facade)

    引言 在项目开发中,有时候会遇到这样的一种情景:已有系统的各个子系统之间,随着业务需求的发展,有了比较紧凑的耦合关系.现在需要利用这些子系统的功能,为移动端提供业务处理.我们该怎么应对这样的业务需求呢 ...

  2. CSS隐藏滚动条但又能滚动,不用js实现

    隐藏多余的内容,但是可以滑动查看 原理就在于padding-right:17px;把滚动条挤出去隐藏了

  3. 项目实战:JSP应用开发_接口:接口的实现

    在类的声明中使用implements关键字来实现接口,一个类可以同时实现多个接口,各接口间用“,”隔开. class classname implements interfacename{   //重 ...

  4. SlidingMenu官方实例分析1——ExampleListActivity

    1.SlidingMenuDemo下载: 由AndroidManifest.xml能看出项目是从ExampleListActivity启动的: ExampleListActivity继承了Sherlo ...

  5. SQL金典

    ps:补充自己的基础知识,大神请无视.. ~~~~~~~~~~~~~~~~~~~~~ DataBase Management System,DBMS.... Catalog ...库 Table... ...

  6. go反射----1类型

    声明:文章内容取自雨痕老师<Go语言学习笔记> 反射( reflect )让我们能在运行期探知对象的类型信息和内存结构,这从一定程度上弥补了静态语言在动态行为上的不足.同时,反射还是元编程 ...

  7. 爬虫实战【5】送福利!Python获取妹子图上的内容

    [插入图片,妹子图首页] 哈,只敢放到这个地步了. 今天给直男们送点福利,通过今天的代码,可以把你的硬盘装的满满的~ 下面就开始咯! 第一步:如何获取一张图片 假如我们知道某张图片的url,如何获取到 ...

  8. idea 不能编译生成class文件

    问题:开发工程中将idea中编译输出目录 out 删掉.发现再次编译不能生成class文件 解决方案:settings -> compiler 勾选自动编译选项

  9. 深入C#学习系列一:序列化(Serialize)、反序列化(Deserialize)(转)

    序列化又称串行化,是.NET运行时环境用来支持用户定义类型的流化的机制.其目的是以某种存储形成使自定义对象持久化,或者将这种对象从一个地方传输到另一个地方.    .NET框架提供了两种串行化的方式: ...

  10. add jars、add external jars、add library、add class folder的区别

    add external jars = 增加工程外部的包add jars = 增加工程内包add library = 增加一个库add class folder = 增加一个类文件夹 add jar是 ...