<html>
<body>
<div id="div1" frame_id='frame1'>
<iframe id='frame1' data_src="http://www.baidu.com" style='height:700px;width:400px'></iframe>
</div>
<br/>
<div id="div2" frame_id='frame2'>
<iframe id='frame2' data_src="http://www.baidu.com" style='height:700px;width:400px'></iframe>
</div>
<br/>
<div id="div3" frame_id='frame3'>
<iframe id='frame3' data_src="http://www.baidu.com" style='height:700px;width:400px'></iframe>
</div>
<br/>
<div id="div4" frame_id='frame4'>
<iframe id='frame4' data_src="http://www.baidu.com" style='height:700px;width:400px'></iframe>
</div>
<br/>
<div id="div5" frame_id='frame5'>
<iframe id='frame5' data_src="http://www.baidu.com" style='height:700px;width:400px'></iframe>
</div>
<br/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//需加载的初始页面集合，加载后从此集合中去除避免重复加载
var d1 = document.getElementById("div1");
var d2 = document.getElementById("div2");
var d3 = document.getElementById("div3");
var d4 = document.getElementById("div4");
var d5 = document.getElementById("div5");
var div_arr = [d1, d2, d3, d4, d5];
loadFrame();
var itv;
$(window).scroll(function(){
clearTimeout(itv);
itv = setTimeout(loadFrame(),500);
});
function loadFrame(){
$("div[id^='div']").each(function(i){
var div_id = $(this).attr('id');
var load_id = $(this).attr('frame_id');
var id_index = i+1;
//已经加载过的不再加载
if(isContained(div_id)) {
var oTop = $(this).offset().top;
var scrolltop = $(window).scrollTop();
var winHeight = $(window).height();
//alert("oTop="+oTop+" \n" + "scrolltop="+scrolltop+" \n" + "winHeight="+winHeight+" \n" );
if((oTop-scrolltop)>0 && (oTop-scrolltop)<winHeight){
var frame_src = $("#"+load_id).attr("data_src");
$("#"+load_id).attr("src",frame_src);
deleteElement(div_id);
}
}
});
}
//删除已经加载的记录
function deleteElement(id) {
for(var i=0; i<div_arr.length; i++) {
if(div_arr[i]!=undefined && div_arr[i].id == id) {
delete div_arr[i];
return;
}
}
}
//判断未加载列表是否包含当前对象
function isContained(id) {
var result = false;
$.each(div_arr, function(i, n) {
if(n!=undefined && n.id == id) {
result = true;
}
});
return result;
}
</script>
</body>
</html>
分享到：
相关推荐
jQuery实现滚动网页延时加载图片的2个例子，这样的特效我们经常在一些大的网站看到，是不是也想给自己的小站来一个此类功能呢？欢迎下载此代码实例。
Android异步加载的简单例子，特别是在需要加载比较多的图片的时候，异步加载可有效提高网页的加载速度，捕获RejectedExecutionException同时加载的图片过多而导致程序崩溃，把需要加载的加载，不需要加载的先放着，...
我这里把加载图片作为例子，就好像百度图片里的一样，你往下滚动，它就会继续显示下一页的图片。 要求是这样的，比如我要加载20张图片，在页面加载完毕后我先加载5张（前提是5张已经占满浏览器窗口高度），当滚动条...
昨天有一需求，是希望... 想要页面加载完毕时自动滚动一定距离，则使用jquery的animate，如下面例子： $(“html,body”).animate({“scrollLeft”: “300px”}, 1000); $(“html,body”).animate({“scrollTop”: “30
滚动分页 npm i @boltdoggy/scroll-paging -S import scrollPaging from '@boltdoggy/scroll-paging' ; scrollPaging ( ( index , next ) => { // index: number, pagination, start from 1 // next: function, ...
我们经常会看到拉动滚动条时到页底时，页面会继续加载更多内容。这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。 若是想看该网页特效教程 ...
一个很好用的即时加载图片，例子里面也很详细，属于本人原创，希望多你有所帮助
支持标签滚动的网页TAB选项卡，需要用到google jsapi，不过现在Google网站好像有问题，总是加载jsapi失败，所以可能有些地区的朋友运行看效果会受阻。jaws可对TAB选项卡菜单进行分组，并可实现滚动功能，可隐藏掉不...
滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合jsonp是如何实现的吧，小菜总结记录之用，高手勿喷。当然本例子采用的是jquery库，后期会做成原生js。 本例的数据调用的是锋利的jquery一书提供的一...
它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候，很漂亮而且流畅，没有延迟。 CSS代码 这个概念就是写一个CSS样式设置一批背景图片，然后将其隐藏，这样你就看不到那些...
代码如下:[removed][removed]<!– //再载入lazyload –> [removed][removed] [removed] jQuery(document).ready( function($){ $(“container”)...$(“img”).lazyload({ placeholder : “grey.gif”, //加载图片前
加载更多（底部到达检测） 拉动刷新 jQuery Mobile 自动增强 例子 。 。 入门 下载或和 。 在您的网页中： < link rel =" stylesheet " href =" jquery.scrollz.css " > < script src =" jquery.js " ...
举个例子，我们在刷QQ空间或者微博评论的时候，一直往下刷，网页越来越长，内容越来越多，就是这个让人又爱又恨的动态加载。 爬取动态页面目前来说有两种方法 分析页面请求（这篇介绍这个） selenium模拟浏览器...
加载页面时开 启 新 窗 口.htm 禁用鼠标右键.htm 科学计算器.htm 可拖动的图片.htm 可以拖动的效果.htm 面积.htm 判断注册信息.htm 跑马灯.htm 跑马灯2.htm 闪烁的文字.htm 省市三级刷新.htm 鼠标星星效果.htm 树 型...
随着页面的滚动，加载并呈现以下内容。 这可以大大提高页面打开速度，并减少额外的网络请求（xhr）。vue-lazy-container可以帮助我们解决此问题。在线演示更多细节请参考这个。安装npm install vue-lazy-container...
scroll-to-this="onhash"] 当属性 [data-scroll-to-this-hash] 中设置的哈希值是 [removed].hash 时滚动到此元素[data-scroll-to-offset] 以像素为单位设置滚动的偏移量例子在页面加载时 <div data-scroll-to-...
使用图像使用表格数据分页自定义页面包装器配置选项外观选项回调功能分页选项infinite.isElementInViewport的选项造型风格CSS类固定滚动和overflow-anchor 尺寸依存关系执照 例子例子 特征使用浏览器默认值自然滚动...
它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候，很漂亮而且流畅，没有延迟。 CSS代码 这个概念就是写一个CSS样式设置一批背景图片，然后将其隐藏，这样你就看不到那些...
例子在控制基于滚动的图形 ，nytimes.com nytimes.com在《 ，《千方百计触发放大照片nytimes.com 的桌面版《 中的动画触发ScrollStory在讲义中进行了比较懒惰加载360º视频，nytimes.com nytimes.com 揭示“ 文字...
这是一个ant的虚拟表格，用于解决大数据渲染时页面卡顿的问题，本组件是对ant.desigin中Table组件进行一层封装，属性完全与原组件表保持一致的，可以让你实例中处理渲染1000万条数据，页面也非常流畅。 设计说明 ...