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

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

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

原理其实很简单,默认<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. BAT-使用BAT方法设置IP地址

    ::------以下为批处理文件内容---- @echo off ::set slection1= set/p slection1=请输入IP地址: netsh interface ip set ad ...

  2. iOS图片加水印效果的实现并保存至相冊

    图片加水印效果的实现并保存至相冊 实现效果如图: project下载:githubproject下载链接 代码: - (void)viewDidLoad { [super viewDidLoad]; ...

  3. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

    通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML ...

  4. 图像增强之DDE---基于红外图像的数字图像细节增强DDE

    (1)DDE应用背景 (2)DDE算法简介 (3)DDE 实现 (4)DDE 总结和不足 ----------author:pkf -----------------time:2-9 -------- ...

  5. hdu 4587(割点的应用)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4587 思路:题目的意思很简单,就是删除任意2个节点以及关联的边,求图的最大连通分量数.我们知道删除割点 ...

  6. 使用神器MobaXterm连接远程mysql和redis

    https://mobaxterm.mobatek.net/download-home-edition.html mysql redis 连接测试 mysql 127.0.0.1 3307 密码使用线 ...

  7. 3、easyUI-创建 CRUD可创建展开行明细编辑dataGrid(表格)

    同样在上一节中讲到可以编辑的表格,现在讲一般用到的最后一个datagrid(表格)相关的展开明细可编辑的表格: 第三中表格主要应用场景在:列出表格信息,然后点击可以查看详细信息(此处是全部可以编辑,可 ...

  8. Scanner类与Random类

    1.Scanner类 Scanner类的作用是获得输入,下面代码用于获得用户的键盘输入,实例如下: 常用方法: String next():将输入信息的下一个标记扫描为一个字符串 Int nextIn ...

  9. windows下 兼容Python2和Python3

    windows下同时安装了python2和python3时,都可以配置环境变量,如果在命令行里输入python命令,windows会去环境变量里寻找Python的安装位置,如果先找到pytoon2的, ...

  10. Convert.ToInt32(string '000000003') 变成了 3

    Convert.ToInt32(string '000000003') 变成了 3 但是在查询的时候需要用的是string 这里的convert.toint32 反而起了坏作用,不是所有的时候都要用c ...