`
caibinghong
  • 浏览: 149814 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

减少图片请求,分批加载图片

 
阅读更多
var lazyLoad = {
  Init: function () {
  return $("img[lazyload]");
  },
  Calculate: function (lazyloadobject) {
  var windowHeight = $(window).height();
  var arrReturn = {};
  var _scrollTop;
  if (lazyloadobject.length == 0) {
  return null;
  }
  else {
  lazyloadobject.each(function (i) {
  _scrollTop = parseInt($(this).offset().top - windowHeight);
  if (!arrReturn.hasOwnProperty(_scrollTop)) {
  arrReturn[_scrollTop] = new Array();
  }
  arrReturn[_scrollTop].push($(this));
  });
  this.ArrLoad = arrReturn;
  return arrReturn;
  }
  },
  ArrLoad: null,
  IsLoad: function (scrolltop, objectstop) {
  if (objectstop != null && objectstop != {}) {
  for (i in this.ArrLoad) {
  if (parseInt(i) <= scrolltop && this.ArrLoad.hasOwnProperty(i)) {
  for (j = 0; j < this.ArrLoad[i].length; j++) {
  this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
  }
  delete this.ArrLoad[i];
  }
  }
  }
  },
  Run: function () {
  var lazyLoadObject = this.Init();
  this.Calculate(lazyLoadObject);
  arrScrollTop = this.ArrLoad;
  if (arrScrollTop == null) {
  return false;
  }
  else {
  var _this = this;
  _this.IsLoad($(window).scrollTop(), arrScrollTop);
  $(window).scroll(function () {
  _this.IsLoad($(this).scrollTop(), arrScrollTop);
  });
  }
  }
  }
  $(function () {
  lazyLoad.Run();
  });
  $(window).resize(function () {
  lazyLoad.Run();
  });
分享到:
评论

相关推荐

    数据分批加载

    数据分批加载是一种高效的数据处理策略,特别是在大数据分析和机器学习场景中,它能显著减少内存占用并提高系统性能。这种技术允许程序不是一次性加载所有数据,而是将数据集分割成若干个小批次(批次大小可调),...

    android分批加载

    3. **网络请求**:若数据来自网络,可采用类似上述的分批加载策略,并考虑使用缓存策略。 4. **错误处理**:处理加载失败的情况,提供重试机制。 总结,分批加载是Android应用中处理大数据集的关键技术,通过合理...

    android Listview分批加载+自动加载

    为了解决这个问题,我们可以采用"分批加载"(也称为“增量加载”或“无限滚动”)和"自动加载"的策略。下面将详细解释这两个概念以及如何在实践中实现它们。 分批加载(Lazy Loading)是一种优化技术,它仅在用户...

    纯前端模糊查询和数据的分批加载demo

    "纯前端模糊查询和数据的分批加载demo"是一个很好的实践案例,它涵盖了如何仅使用JavaScript实现前端模糊查询以及如何通过分批加载来优化DOM性能。下面我们将深入探讨这两个核心知识点。 一、JavaScript模糊查询 1...

    Android ListView 实现分批加载

    由于一次性加载所有数据可能会消耗大量内存并导致应用性能下降,因此通常会采用分批加载(也称为懒加载)策略来优化用户体验。本文将深入探讨如何在Android中实现ListView的分批加载功能。 一、分批加载原理 分批...

    jquery图片预加载

    上述代码中,`preloadImages`函数接受一个图片URL数组作为参数,对每个URL创建一个新的`Image`对象,并设置其`src`属性,这样浏览器就会开始加载图片。如果图片已经加载完成(`img.complete`为`true`),我们可以在...

    Bamboy分批加载(ListView)

    在Android开发中,ListView是一种常用的组件,用于展示大量的数据列表。在处理大量数据时,一次性加载所有内容可能会导致应用响应缓慢...同时,分批加载还有助于减少网络请求次数,节省用户流量,进一步提升用户体验。

    GridView加载大量图片卡的问题

    它同样能在后台线程加载图片,减少对UI的影响。 4. **Glide**:Google推荐的图片加载库,特别适合加载和展示大图。Glide提供了丰富的功能,如自动裁剪、缩放、动画支持等,并且在内存管理上做得很好,能有效防止...

    jQuery实现图片预加载

    预加载插件可能还包含优化策略,如根据屏幕可见区域加载图片(懒加载),或者分批加载图片以减少内存占用。这有助于在保证用户体验的同时,降低服务器负载。 总结来说,jQuery实现图片预加载能显著提升网页的响应...

    Android实现简单的分批加载ListView

    因此,分批加载(Lazy Loading)成为了解决这一问题的有效方法。本文将详细介绍如何在Android中实现简单的分批加载ListView。 首先,我们需要创建一个SQLite数据库来存储数据。`PersonDb` 类继承自 `...

    JS异步加载图片

    2. **分批次加载**:不是一次性加载所有图片,而是分批加载,降低一次性请求的压力。 3. **图片压缩**:使用图片压缩工具对图片进行优化,减小文件大小。 4. **WebP或SVG格式**:使用更高效的图片格式,如WebP,或者...

    js实现图片预加载.tx

    2. **分批加载**:根据用户滚动位置逐步加载图片,而非一次性加载所有图片。 3. **使用懒加载**:结合懒加载技术,只有当图片进入可视区域时才开始加载,这样可以进一步节省资源。 4. **优化图片格式和大小**:使用...

    图片懒加载--适合你的前端技巧

    - **数据分批加载**:懒加载不一次性加载所有图片,而是将图片分为可视区内的“立即加载”和可视区外的“延迟加载”两部分。 - **监听滚动事件**:当用户滚动页面时,JavaScript会检测图片的位置是否进入或接近视口...

    完美解决大量图片下载卡顿问题

    2. **延迟加载(懒加载)**:仅在用户滚动到可视区域时才加载图片,可以显著减少初期页面加载时的带宽需求。JavaScript库如Lozad.js或LazyLoad可以实现这一功能。 3. **图片压缩**:使用工具(例如TinyPNG或...

    安卓listview相关相关-listview实现图片的异步加载.rar

    8. **ListView的优化**:除了异步加载,还可以通过设置ListView的缓存容量(setCacheColorHint)、分批加载(OnScrollListener)等手段进一步优化性能。 9. **图片压缩**:在加载大图时,可以先进行压缩处理,减少...

    异步加载及listview分页

    3. **Fresco**:Facebook开源的图片加载库,它使用自己的内存和磁盘缓存,支持复杂的图片格式,如WebP,对内存管理特别友好。 在实际应用中,我们可以根据项目需求选择合适的异步加载和分页技术。例如,对于图片...

    jquery 异步加载页面

    - **分块加载**:大文件或数据可以分批加载,减少一次性加载的压力。 - **延迟加载**:仅在需要时加载非关键内容,如图片或视频。 ### 结语 jQuery异步加载页面技术是现代Web开发中不可或缺的一部分,它极大地提升...

    DIV懒加载demo

    同时,合理地组织和分批加载数据,避免一次性加载大量内容导致页面卡顿。 7. **用户体验**:加载过程中应提供反馈,如显示加载指示器,让用户知道内容正在加载。加载完成后,确保页面布局平滑过渡,避免出现闪烁或...

    listView图片快速滑动实例

    懒加载的核心思想是分批加载资源,只加载用户当前需要看到的部分,而不是一次性加载所有数据。在ListView中,这意味着我们不会预先加载所有图片,而是等到图片所在的ListView项即将显示时才开始加载。这样可以显著...

    微信小程序服务器上获取图片保存本地源码

    9. **性能优化**:对于大量图片的处理,可以考虑使用分批加载、懒加载等策略,减少对网络和本地存储的压力,提高应用的运行效率。 10. **代码结构**:良好的代码组织和模块化设计可以使代码更易读、易维护。可以将...

Global site tag (gtag.js) - Google Analytics