载入一个内容较多的页面的时候,如果不做任何处理,则会在一开始就把全部内容加载出来,影响了性能和体验,所以现在常用分屏加载的功能,就是dom内容出现在屏幕可视范围内的时候,再加载dom节点,起到优化的作用。

  我在项目中用的是textarea,原理就是把需要滚动加载的dom内容放进一个textarea里,然后用一个容器包裹住,当这部分内容高度出现在屏幕中的时候,就释放出textarea中的值append到容器中,实现滚动加载。

  代码不多,js部分就两个函数,直接上代码吧:

  完整版去github看: demo

//定义空间命名
var GLOBAL = {}; //window
$(function () {
GLOBAL.lazyLoad = {
//循环每一个指定textarea,如果在可见区域就写入html,如果有回调函数执行回调函数
eachElem: function ($elem, scollTop, windowH, callback) {
$elem.each(function (index, el) {
var $this = $(el);
var elemTop = $this.parent().offset().top;
var htmls = $this.text(); if ((elemTop > scollTop - 100) && (elemTop - scollTop < windowH)) { //容器出现在屏幕可视范围的时候
if ($this.data("addYet") != 1) {
$this.parent().append((htmls)); //容器添加textarea释放出的html
$this.data("addYet", "1"); if (callback && $.type(callback) == "function") { //如果该html是绑定了js功能的,则传入绑定函数名,比如轮播等,或者其他第三方插件等等
callback(htmls, $this.parent());
}
}
}
});
},
//动态创建dom元素
creatEle: function (targetElm, callback) {
var $elem = $.type(targetElm) == "string" ? $(targetElm) : $("textarea.js_addToDom"),
$window = $(window),
windowH = $window.height(),
that = this;
var _blank = null;
that.eachElem($elem, $window.scrollTop(), windowH, callback); $window.scroll(function () { //滚动时检测
var scrollTop = $(this).scrollTop(); if (_blank) {
clearTimeout(_blank);
}
_blank = setTimeout(function () { //加载dom
that.eachElem($elem, scrollTop, windowH, callback);
}, 300);
});
}
}
GLOBAL.lazyLoad.creatEle("textarea.img_load"); //绑定需要加载的内容
});

html部分:

<img src="img/a1.jpg" alt=""/><br/>
<img src="img/a1.jpg" alt=""/><br/>
<img src="img/a1.jpg" alt=""/><br/> <div class="wrap">
<textarea class="img_load none">
<img src="img/a1.jpg" alt=""/><br/>
</textarea>
</div>

当容器wrap出现在可视范围内后,则会释放textarea中的内容,添加进wrap,起到加载作用.

GLOBAL.lazyLoad.creatEle("textarea.img_load");绑定,如果有js功能,则需要传入第二个参数绑定函数,比如轮播插件flexslider:

function initBuyerShowImg(htmls, $warp) {
$warp.flexslider({
namespace: "",
animation: "slide",
selector: ".slider > li",
pauseOnAction: false,
itemWidth: 150,
controlNav: false,
animationLoop: false
});
} GLOBAL.lazyLoad.creatEle("textarea.js_buyShowslide", initBuyerShowImg);

html:

<!--轮播-->
<div class="buyer-show-slide">
<a href="javascript:;" rel="nofollow" target="_blank" class="buyer-show-cover"></a>
<textarea class="js_buyShowslide none">
<ul class="slider">
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
<li><a href="javascript:;"><img src="img/flower.jpg" height="210" rel="nofollow"/></a></li>
</ul>
</textarea>
</div>

差不多就这样啦,挺简单的。

dom元素分屏加载的更多相关文章

  1. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  2. ready是先执行的,load后执行,DOM文档的加载步骤

    在jq中在文档载入完毕后有这几种方式去执行指定函数: $(document).ready(function() { // ...代码... }); //document ready 简写 $(func ...

  3. vuejs学习之 项目打包之后的首屏加载优化

    vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例 ...

  4. Gemfile分平台加载gem

    Gemfile分平台加载gem 区分平台以便加载不同的web server,象tzinfo-data只适用于windows # Windows does not include zoneinfo fi ...

  5. 滚屏加载--jQuery+PHP实现浏览更多内容

    滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实 ...

  6. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  7. DOM编程以及domReady加载的几种方式

    1,关于DOM编程       DOM编程主要是对dom树节点进行操作,所以你必须掌握基本的节点类型,如何去获取节点名字以及值(这些相关知识你可以去网上查,这里推荐一个慕课学习网站->https ...

  8. react 首屏加载优化

    react 首屏加载优化,原本是在入口HTML文件中加载loading动画,但是部署在测试环境上的时候一直无法显示loading的部分,也是奇怪了,我们测试环境的部署一直跟本地的都不太一样,内外网的转 ...

  9. jQuery 超屏加载

    jQuery 超屏加载,当文档超出屏幕的高度时,加载最新下个列数据 $(window).scroll(function () { var height = $(document).height(); ...

随机推荐

  1. 前端面试题之一JAVASCRIPT(理论类)

    一.请描述一下 cookies.sessionstorage .localstorage 和session的区别?(1)cookie是网站为了标示用户身份而储存在用户本地终端(client side) ...

  2. 反编译之jadx工具

    1.jadx是个开源 https://github.com/skylot/jadx 2.下载后cd到文件的根目录 然后输入命令 ./gradlew dist 之后会出现build文件进入/build/ ...

  3. php输出json,需要嵌套数组和对象问题

    https://segmentfault.com/q/1010000009985295 $tmp = []; $tmp['id'] = 'aaa'; $tmp['name'] = 'bbb'; $tm ...

  4. 关于Spring Cloud Feign的一些记录!

    学习Spring Cloud Feign过程中,相关资料都会反复强调:微服务调用的话(@FeignClient)  客户端方法的返回值和服务端方法的返回值还有方法名之类的都是要求一致的! 关于方法名是 ...

  5. <每日一题>题目24:冒泡排序

    ''' 冒泡排序:比较相邻元素,顺序错误就交换顺序 ''' import random import cProfile def bubble_Sort(nums): for i in range(le ...

  6. 设置苹果手机input按钮和button按钮颜色显示问题

    网页上,尽管设置了input按钮和button的背景颜色,但在苹果手机上测试时仍会发现背景颜色为透明渐变色,不起作用,怎么解决呢? 在css公共样式中加上下面代码就可以解决,去除button和inpu ...

  7. 如何做系列(4)-微博URL短网址生成算法原理(java版、php版实现实例)

    短网址(Short URL),顾名思义就是在形式上比较短的网址.通常用的是asp或者php转向,在Web 2.0的今天,不得不说,这是一个潮流.目前已经有许多类似服务,借助短网址您可以用简短的网址替代 ...

  8. BZOJ 2683: 简单题(CDQ 分治)

    题面 Time Limit: 50 Sec  Memory Limit: 128 MB Description 你有一个N*N的棋盘,每个格子内有一个整数,初始时的时候全部为0,现在需要维护两种操作: ...

  9. CSS 滤镜效果

    本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN -- filter 了解下: { filter: blur(5px); ...

  10. 深入浅出 Java Concurrency (8): 锁机制 part 3[转]

    接上篇,这篇从Lock.lock/unlock开始.特别说明在没有特殊情况下所有程序.API.文档都是基于JDK 6.0的. public void java.util.concurrent.lock ...