三十六、最好用的懒加载

window.Echo=(function(window,document,undefined){‘use strict‘;var store=[],offset,throttle,poll;var _inView=function(el){var coords=el.getBoundingClientRect();return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));};var _pollImages=function(){for(var i=store.length;i--;){var self=store[i];if(_inView(self)){self.src=self.getAttribute(‘data-echo‘);store.splice(i,1);}}};var _throttle=function(){clearTimeout(poll);poll=setTimeout(_pollImages,throttle);};var init=function(obj){var nodes=document.querySelectorAll(‘[data-echo]‘);var opts=obj||{};offset=opts.offset||0;throttle=opts.throttle||250;for(var i=0;i<nodes.length;i++){store.push(nodes[i]);}_throttle();if(document.addEventListener){window.addEventListener(‘scroll‘,_throttle,false);}else{window.attachEvent(‘onscroll‘,_throttle);}};return{init:init,render:_throttle};})(window,document);

  echo.min.js

初始化:

Echo.init({
offset:1, //离可视区域多少像素的图片可以被加载
throttle:1 //图片延迟多少毫秒加载
});

原文地址:https://www.cnblogs.com/deng-jie/p/10006653.html

时间: 2024-10-11 21:14:39

三十六、最好用的懒加载的相关文章

【SSH三大框架】Hibernate基础第十二篇:load()懒加载分析以及一对一、一对多、多对一、多对多懒加载的分析

一.懒加载的定义: 懒加载:在WEB应用程序中,经常会需要查询数据库,系统的响应速度在很大程度上是与数据库交互的响应.因此,如果能够优化与数据库的交互速度,则能够大大提高WEB应用的响应速度. 例如:当有一个Student类和一个Teacher类.当我们加载一个学生的所有信息,包括:学号,姓名等属性后,此时Student类中的Teacher类型的属性为null,当我们需要知道这个Student对应的Teacher属性的时候,我们才去加载这个Teacher对象. 如果,我们只需要知道学生信息,我们

第三十五节(java-动态加载级联菜单)

CityMapjava 文件里: package com.tanzhou.util; import java.util.LinkedHashMap; import java.util.Map; import javax.tools.JavaCompiler; /** * 城市数据的组织类 * @author Ming * @version 1.0 * 2015-2-7 * */ public class CityMap implements java.io.Serializable{ /** *

hibernate延迟加载(懒加载)详解

Hibernae 的延迟加载是一个非常常用的技术,实体的集合属性默认会被延迟加载,实体所关联的实体默认也会被延迟加载.Hibernate 通过这种延迟加载来降低系统的内存开销,从而保证 Hibernate 的运行性能. 下面先来剖析 Hibernate 延迟加载的"秘密". 集合属性的延迟加载 当 Hibernate 从数据库中初始化某个持久化实体时,该实体的集合属性是否随持久化类一起初始化呢?如果集合属性里包含十万,甚至百万的记录,在初始化持久化实体的同时, 完成所有集合属性的抓取,

ViewPager懒加载

一.运行效果图 打印Log图 二.工程结构 三.实现代码 1.创建Fragment需要继承的抽象类,即父类 package com.example.lazyloaddemoa.fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.text.TextUtils; import andr

20160510--hibernate懒加载问题

懒加载 通过asm和cglib二个包实现:Domain是非final的. 1.session.load懒加载. 2.one-to-one(元素)懒加载: 必需同时满足下面三个条件时才能实现懒加载 (主表不能有constrained=true,所以主表没有懒加载) lazy!=false 2)constrained=true 3)fetch=select 3.one-to-many (元素)懒加载:1)lazy!=false 2)fetch=select 4.many-to-one (元素) :1

Python进阶(三十六)-Web框架Django项目搭建全过程

Python进阶(三十六)-Web框架Django项目搭建全过程 ??IDE说明: Win7系统 Python:3.5 Django:1.10 Pymysql:0.7.10 Mysql:5.5 ??Django 是由 Python 开发的一个免费的开源网站框架,可以用于快速搭建高性能,优雅的网站! Django 特点 强大的数据库功能 用python的类继承,几行代码就可以拥有一个丰富,动态的数据库操作接口(API),如果需要你也能执行SQL语句. 自带的强大的后台功能 几行简单的代码就让你的网

2018-08-24 第三十六课

第三十六课 非关系统型数据库-mangodb 目录 二十四 mongodb介绍 二十五 mongodb安装 二十六 连接mongodb 二十七 mongodb用户管理 二十八 mongodb创建集合.数据管理 二十九 php的mongodb扩展 三十 php的mongo扩展 三十一 mongodb副本集介绍 三十二 mongodb副本集搭建 三十三 mongodb副本集测试 三十四 mongodb分片介绍 三十五 mongodb分片搭建 三十六 mongodb分片测试 三十七 mongodb备份

Egret入门学习日记 --- 第三十六篇(书中 10.7 ~ 10.8 节 内容)

第三十六篇(书中 10.7 ~ 10.8 节 内容) 开始 书中 10.7 节内容. 书中 10.7 节内容结束. 书中重点: 1.导出素材. 2.配置粒子库. 3.播放动画. 开始操作: 1.导出素材. 我设置好了雪花的效果. 接着是导出. 这是导出后的资源文件. 导入Egret的预加载资源组中. 2.配置粒子库. 下载好官方的粒子库. https://github.com/egret-labs/egret-game-library 拷贝粒子库到项目外,记住 项目文件夹外! 配置好 egret

mybatis(三)懒加载

懒加载的好处: 所谓懒加载(lazy)就是延时加载,延迟加载.什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载.至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适,因为内存容量有限 ,为了减少并发量,减少系统资源的消耗,我们让数据在需要的时候才进行加载,这时我们就用到了懒加载.总结为: 1> 不必将创建对象的代码全部写在viewDidLoad方法中,代码的可读性更强,层次感很强. 2> 每个属性的getter方法中分别负责各自的实例化处理,代码彼此之间的独立性强

微信小程序把玩(三十六)Storage API

原文:微信小程序把玩(三十六)Storage API 其实这个存储在新建Demo的时候就已经用到了就是存储就是那个logs日志,数据存储主要分为同步和异步 异步存储方法: 存数据 wx.setStorage(object) 相同key会覆盖,可写回调方法 获取方法: wx.getStorage(object) 清除方法: wx.clearStorage()里面可以写回调函数 成功,失败,完成 同步存储方法: 存数据 相同key会覆盖 wx.setStorageSync(key,data) 读数据