`
standalone
  • 浏览: 596522 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery lazy loading

阅读更多

最近玩了一下jquery,主要是在做的一个小工具要在一个web page里显示一个表格,表格每一行有一个图片,大约有几万行,所以问题是一下子load下来吃不消了。对于前端我是门外汉,网上搜了一下,发现有个lazy load的插件,jquery写的。

这个是官方网站:

http://www.appelsiini.net/projects/lazyload

但是因为这玩意很早写的,后来浏览器发展太快了吧所以现在的浏览器上这个插件有问题了,作者在网站上也说了。于是就有某人去改了一些:

这个是某人改进的:

http://www.popo4j.com/qianduan/transformation_jquery_lazyload_plug.html

但是还有某些人说这些改进都不work,具体见某人详细地分析:(分析问题很透彻啊!)

jQuery插件Lazy Load Plugin的效果讨论

我同意上面博客的讨论结果,就是那个插件不正确,在此我同意他的观点:

 

对于延迟加载图片这种web优化方案,我认为一般是在输出html页面之前就在服务器端处理好img标签(干掉src属性,将src值转存到自定义属性中),在页面端只是用js来触发延迟加载。

 好吧,由于我真得不太懂javascript,我就基于原作的code基础上改进了一下,另外主要使用了一下二分查找把哪些图片在viewport里找出来,算是效果有了很大提高。现在2w图片的时候滚动页面的时候,图片的加载还是很自然的。

再说一遍,由于我不是javascript门外汉,所以不贴code了,真有谁需要发信给我。

分享到:
评论

相关推荐

    Lazy-Loading-Images:使用多种方法延迟加载图像的简单示例

    #Lazy在网络上加载图片 该存储库包含一些使用多种方法为网络延迟加载图像的简单示例:普通JavaScript,jQuery,[be] Lazy.js,LazyLoad.js,Lazy Load XT和Unveil。

    jQM-MVC-Lazy-Loader:用于延迟加载模块的 jQuery Mobile 的超轻量级 MVC。 “app”对象上有一些辅助方法来帮助 UI 开发

    #jQM-Lazy-Loading-MVC ###目录 ##Purpose 轻量级 jQuery Mobile MVC-ish 延迟加载库。 使项目创建快速简便。 延迟加载控制器和视图。 模型留给开发人员。 辅助方法提供快速简便的 UI 功能。 ####Notes 这并...

    html5+js(支持手机页面)图片懒加载

    HTML图片懒加载,亲测可用,插件也比较小,使用起来挺方便的.根据jquery 提供的 lazyload.js 插件实现图片懒加载,demo 在最下面。 lazyLoading.js 可以缓解庞大项目的网络压力lazyLoading.js图片懒加载

    《DoitPHP编码规范》

    四、集成了JQUERY及THICKBOX、TABS、JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效果(锁屏效果)、TAB菜单.、CHECKBOX的全选或反选效果以及图片的惰性加载效果等,让其...

    PHP框架DoitPHP v3.0 正式版

    简而言之:DoitPHP运行高效,易学易用,易于扩展。换而言之:DoitPHP运行高效而不失...四、集成了JQUERY及THICKBOX、TABS、JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效

    PhP框架DoitPHP v1.5 MySql版

    简而言之:DoitPHP运行高效,易学易用,易于扩展。换而言之:DoitPHP运行高效而不失...四、集成了JQUERY及THICKBOX、TABS、JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效

    PHP框架DoitPHP v1.5 SAE版

    简而言之:DoitPHP运行高效,易学易用,易于扩展。换而言之:DoitPHP运行高效而不失...四、集成了JQUERY及THICKBOX、TABS、JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效

    DoitPHP 1.0

    四、集成了JQUERY及THICKBOX、TABS、JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效果(锁屏效果)、TAB菜单.、CHECKBOX的全选或反选效果以及图片的惰性加载效果等,让其...

    DoitPHP 框架

    四、集成了JQUERY及JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效果(锁屏效果)、TAB菜单.、CHECKBOX的全选或反选效果以及图片的惰性加载效果等,让其变得得心应手。 ...

    PHP框架DoitPHP v1.3.zip

    四、集成了JQUERY及THICKBOX、TABS、JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效果(锁屏效果)、TAB菜单.、CHECKBOX的全选或反选效果以及图片的惰性加载效果等,让其...

    IAS中文操作手册.zip

    loader: "<div class='pagination-loading col-sm-12'><img src='/img/ias/loading.gif'/></div>", triggerPageThreshold: 2, onRenderComplete: function () { $(".excerpt .thumb").lazyload({ placeholder: ...

    PhP框架DoitPHP v1.5 MySql版.zip

    四、集成了JQUERY及THICKBOX、TABS、JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效果(锁屏效果)、TAB菜单.、CHECKBOX的全选或反选效果以及图片的惰性加载效果等,让其...

    PHP框架DoitPHP v1.5 SAE版.zip

    四、集成了JQUERY及THICKBOX、TABS、JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效果(锁屏效果)、TAB菜单.、CHECKBOX的全选或反选效果以及图片的惰性加载效果等,让其...

    mam_mol:$ mol-最快的React性微模块紧凑型灵活惰性ui Web框架

    荣誉库:jQuery,React,Redux,MobX。 低级框架。 $ mol非常灵活,但很简单。 荣誉低级前锋:Angular,Vue和Ember。 高级框架。 $ mol具有许多可定制的ui组件。 荣誉高级固件:Ext,OpenUI5。 平台。 $ mol还不...

    hugo-swift-theme:一个简单的开源主题,可与hugo一起发布

    它不依赖于诸如jquery,bootstrap之类的整体库。 相反,它使用网格css , flexbox和vanilla js来简化以下概述的features : 产品特点 博客 分页 深层连结 暗模式 语法高亮 画廊支持 图像的本机延迟加载 先决条件 这...

    angular11-app:Angular 11,Bootstrap 5,Node.js,Express.js,CRUD REST API,PWA,SSR,SEO,Angular Universal,延迟加载,PostgreSQL,MYSQL

    jQuery的:3.5.1 产品特点 路由 延迟加载 服务器端渲染 渐进式Web应用 响应式布局 搜索引擎优化(SEO) 组件 服务 React形式 模板驱动形式 搜索/网格/分页 传单 快速开始 # select a repo from github...

Global site tag (gtag.js) - Google Analytics