最近玩了一下jquery,主要是在做的一个小工具要在一个web page里显示一个表格,表格每一行有一个图片,大约有几万行,所以问题是一下子load下来吃不消了。对于前端我是门外汉,网上搜了一下,发现有个lazy load的插件,jquery写的。
这个是官方网站:
http://www.appelsiini.net/projects/lazyload
但是因为这玩意很早写的,后来浏览器发展太快了吧所以现在的浏览器上这个插件有问题了,作者在网站上也说了。于是就有某人去改了一些:
这个是某人改进的:
http://www.popo4j.com/qianduan/transformation_jquery_lazyload_plug.html
但是还有某些人说这些改进都不work,具体见某人详细地分析:(分析问题很透彻啊!)
我同意上面博客的讨论结果,就是那个插件不正确,在此我同意他的观点:
对于延迟加载图片这种web优化方案,我认为一般是在输出html页面之前就在服务器端处理好img标签(干掉src属性,将src值转存到自定义属性中),在页面端只是用js来触发延迟加载。
好吧,由于我真得不太懂javascript,我就基于原作的code基础上改进了一下,另外主要使用了一下二分查找把哪些图片在viewport里找出来,算是效果有了很大提高。现在2w图片的时候滚动页面的时候,图片的加载还是很自然的。
再说一遍,由于我不是javascript门外汉,所以不贴code了,真有谁需要发信给我。
分享到:
相关推荐
jQuery.Lazyload.js的核心原理在于"懒加载"(Lazy Loading)。这种技术主要是针对网页中的图片资源,尤其是那些位于页面滚动视窗之外的图片。传统的网页加载方式会一次性加载所有图片,而懒加载则只加载当前可视区域...
延迟加载(Lazy Loading)是指仅加载用户可视区域内的资源,当用户滚动页面时,浏览器才会加载即将进入视口的图片或其它资源。这种技术可以显著提高网页的加载速度,特别是对于包含大量图片的页面,可以避免一次性...
2. **延迟加载(Lazy Loading)**:这是一种优化网页性能的技术,仅在用户滚动到特定内容时才开始加载该内容。这显著减少了初始页面加载的时间,提高了用户体验,特别是对于包含大量图片、视频或其他资源的网页。 3...
这种技术被称为“懒加载”(Lazy Loading),可以显著减少页面初次加载时的数据量,提高页面的加载速度,特别是对于拥有大量图片或其他资源的页面,效果尤为明显。 二、工作原理 1. 监听滚动事件:jQuery LazyLoad ...
1. **懒加载(Lazy Loading)**: 懒加载是一种优化策略,延迟非可视区域的内容加载,直到用户滚动到相关内容时才进行加载。这样可以显著减少首次加载页面的时间,提高页面性能。 2. **jQuery**: jQuery是一个流行的...
这种技术通常被称为“懒加载”(Lazy Loading)。在标题“jquery Loading图片延迟加载特效.zip”中,我们可以理解这是一款基于jQuery实现的图片延迟加载插件或库,它包含了一个用于展示滚动页面时图片逐步加载的特效...
在Web开发领域,前端性能优化是不可或缺的一环,而延迟加载(Lazy Loading)技术正是提升用户体验、节省带宽的有效手段。jQuery LazyLoad 是一个非常流行的JavaScript库,专用于实现图片和其他元素的延迟加载。这个...
为了解决这个问题,开发者们提出了“懒加载”(Lazy Loading)技术,它是一种优化策略,允许我们延迟加载非可视区域的内容,直到用户滚动到相关内容时再进行加载。在JavaScript领域,jQuery库提供了一个优秀的懒加载...
jQuery有多个插件支持延迟加载,如`jquery.lazyload.js`。通过添加特定类名或数据属性,可以指定哪些图片应该延迟加载。 2. **预加载(Preloading)** 对于关键图片,比如首屏内容,预加载可以在用户看到之前就...
<img src="loading.gif" data-src="actual-image.jpg" class="lazy" data-width="800" data-height="600"> ``` 四、高级应用与扩展 1. 触发条件:除了滚动事件,还可以通过其他事件触发加载,如点击按钮、页面切换...
<img data-src="image_path.jpg" data-placeholder="loading.gif" class="lazy" alt="懒加载图片" /> $(function() { $(".lazy").lazyload({ effect: "fadeIn", threshold: 200, skip_invisible: false });...
7. **代码优化**:为了保证性能,开发者可能会使用事件委托、延迟加载(lazy loading)等技术来减少DOM操作和资源消耗,尤其是在处理大量图片的焦点图时。 8. **用户交互**:良好的焦点图设计应提供直观的用户交互...
在网页开发中,图片延迟加载(Lazy Loading)是一种优化网页性能的技术,主要应用于拥有大量图片的网站或页面。它的核心思想是,当用户滚动页面时,只加载可视区域内的图片,而那些还未进入视口的图片则暂时不加载,...
在网页设计中,图片延迟加载(Lazy Loading)是一种优化技术,用于提升页面加载速度和用户体验。当用户滚动页面时,只加载视口内的图片,而非一次性加载所有图片。这种方式可以减少首屏加载时间,尤其是对于图片众多...
首先,我们需要理解什么是图片延迟加载(Lazy Loading)。它是一种Web开发策略,只在图片进入浏览器的视口(即用户滚动到图片所在位置)时才开始加载图片。这样,当网页首次加载时,只有可见部分的图片会被加载,而...
其中,“延迟加载”(Lazy Loading)是一种常用且有效的策略。 #### 关键知识点解析 ##### 1. 概念理解 - **延迟加载**:指当用户滚动到某个包含图片元素的位置时才开始加载该图片,而非一开始就加载页面上的所有...
本文将详细讲解如何利用jQuery实现“Loading”图片的延迟加载特效,这是网页性能优化的一个重要策略,尤其对于图片丰富的网站而言。 延迟加载(Lazy Loading)是一种优化技术,它允许网页只加载用户当前可视区域内...
在现代网页设计中,为了提高用户体验和页面加载速度,懒加载(Lazy Loading)技术被广泛应用。jQuery,作为一款广泛使用的JavaScript库,提供了多种实现懒加载的方法。本文将深入探讨jQuery中的8种不同的懒加载...
图片延迟加载(Lazy Loading)是一种优化网页性能的技术,它避免一次性加载所有图片,而是只在用户滚动到即将可见的图片时才开始加载。这样可以显著减少网页初次加载时的数据量,提升页面加载速度,尤其对拥有大量...