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

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

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

原理其实很简单,默认<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. c++ istream(ostream)是如何转换为bool的

    http://www.cplusplus.com/reference/ios/ios/operator_not/ http://stackoverflow.com/questions/8117566/ ...

  2. Android Studio 使用笔记:快捷键

    开发工具中的快捷键是必不可少了,AS中在Help菜单中单击 Default Keymap Reference 浏览器会连接到官网,打开对应你操作系统的快捷键页面,这是一个pdf文件.Mac系统独立一份 ...

  3. redis中毒

    黑客用我们服务器挖矿了 新的一天的开始 周五早上刚到公司,同事来问我系统为啥打不开了?我第一反应就是肯定 Nginx 服务器挂了呗,立马就去登录服务器看看,但此时发现已经完全远程登录不上这台部署了 N ...

  4. c++标准库之thread

    class thread是对线程的抽象.以下分别介绍thread是如何表示线程的大部分特征的. 执行体 线程的执行体由一个可执行(callable)对象来表示.这个执行体可以在thread创建的时候指 ...

  5. Hibernate每个层次类一张表(使用注释)

    在上一文章中,我们使用xml文件将继承层次映射到一个表. 在这里,我们将使用注释来执行同样的任务.需要使用@Inheritance(strategy = InheritanceType.SINGLE_ ...

  6. 用记事本写的java程序引用jar文件

    1.将须要用的jar文件和java程序复制到同一个文件文件夹下 2.进行编译.编译的命令:javac -cp log4j-1.2.15.jar A.java 3.进行运行.运行的命令:java -cp ...

  7. day10上节内容补充和初始函数

    1.上节内容补充 文件的删除和修改: #文件的删除和修改 #文件中全部都要修改 # with open('歌词',encoding='utf-8') as f1,open('歌词.bak','w',e ...

  8. Core Services层

    本文转载至 http://jingyan.baidu.com/article/cdddd41c57360853cb00e124.html Core Services层是系统很多部分的基础部分,也许应用 ...

  9. 关于浏览器内核与javascript引擎的一些小知识

    浏览器是我们每天几乎都必须使用的软件产品,可是对于自己每天都接触的浏览器,很多同学其实对其一无所知.今天异次元就跟大家说说关于浏览器内核的一些事儿吧,好让你了解多一点稍微内在的东西. 在下面的文章中主 ...

  10. 【转】在服务器上排除问题的头五分钟&常用命令

    转自:https://blog.csdn.net/l821133235/article/details/80103106(在服务器上排除问题的头五分钟) 遇到服务器故障,问题出现的原因很少可以一下就想 ...