js 页面图片等元素在普通元素中滚动动态加载技术

/*!
 * 2012-01-13 v1.1 偏移值计算修改 position → offset
 * 2012-09-25 v1.2 增加滚动容器参数, 回调参数
 * 2015-11-17 v1.3 只对显示元素进行处理
*/
(function($) {
	$.fn.scrollLoading = function(options) {
		var defaults = {
			attr: "data-url",
			container: $(window),
			callback: $.noop
		};
		var params = $.extend({}, defaults, options || {});
		params.cache = [];
		$(this).each(function() {
			var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
			//重组
			var data = {
				obj: $(this),
				tag: node,
				url: url
			};
			params.cache.push(data);
		});

		var callback = function(call) {
			if ($.isFunction(params.callback)) {
				params.callback.call(call.get(0));
			}
		};
		//动态显示数据
		var loading = function() {

			var contHeight = params.container.height();
			if ($(window).get(0) === window) {
				contop = $(window).scrollTop();
			} else {
				contop = params.container.offset().top;
			}		

			$.each(params.cache, function(i, data) {
				var o = data.obj, tag = data.tag, url = data.url, post, posb;

				if (o) {
					post = o.offset().top - contop, post + o.height();

					if (o.is(‘:visible‘) && (post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {
						if (url) {
							//在浏览器窗口内
							if (tag === "img") {
								//图片,改变src
								callback(o.attr("src", url));
							} else {
								o.load(url, {}, function() {
									callback(o);
								});
							}
						} else {
							// 无地址,直接触发回调
							callback(o);
						}
						data.obj = null;
					}
				}
			});
		};

		//事件触发
		//加载完毕即执行
		loading();
		//滚动执行
		params.container.bind("scroll", loading);
	};
})(jQuery);

//实例
<script>    var tempHTML = "";    for (var i=1; i<=30; i+=1) {        if (i == 6) {            tempHTML += ‘<div class="zxx_test_list scrollLoading" data-url="loaded.html"><div style="padding:100px 0; text-align:center;"><img src="/study/image/loading.gif" style="margin:0 8px -8px 0;" />加载中...</div></div>‘;        } else {            tempHTML += ‘<div class="zxx_test_list tc"><img class="scrollLoading" data-url="//image.zhangxinxu.com/image/study/head/s180/‘+i+‘.jpeg" src="//s1.xiaomishu.com/b/img/pixel.gif" width="180" height="180" style="background:url(/study/image/loading.gif) no-repeat center;" /><br />图片‘+i+‘(新浪微博提供)</div>‘;        }    }    tempHTML += ‘<div class="zxx_test_list tc"><h6>下面藏了一张图片,<a href="javascript:" id="zxxClickBtn">点击显示</a></h6>\        <div id="zxxShow" style="display:none;">\           <img class="scrollLoading" width="256" height="191" data-url="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />\        </div></div>‘;    document.getElementById("zxxMainCon").innerHTML = tempHTML;</script>
<script>    $(function() {        $(".scrollLoading").scrollLoading({            container: $("#zxxMainCon"),            callback: function() {                this.style.border = "3px solid #a0b3d6";            }        });

//$(".scrollLoading").scrollLoading();

});</script>


原文地址:https://www.cnblogs.com/xieyongbin/p/10324313.html

时间: 2024-10-07 18:38:05

js 页面图片等元素在普通元素中滚动动态加载技术的相关文章

Android中apk动态加载技术研究(2)android插件化及实现

了解了android中类加载的前期知识点后,来看看android中DexClassLoader具体的实现 具体加载流程如下: 宿主程序会到文件系统比如SD卡中去加载APK[1],然后通过一个叫proxy的Activity去执行apk中的Activity 关于动态加载ap,理论上可用用到DexClassLoad.PathClassLoader.URLClassLoader; DexClassLoader: 可以加载文件系统上的jar.dex.apk PathClassLoader:可以加载 /da

Android中apk动态加载技术研究(1)基础知识研修

java classloader 和android中DexClassloader对比: Java ClassLoader : 作用: 主要用来加载class 到jvm中,以供程序使用,也就是说:java程序可以动态加载类定义,而这个动态加载机制就是通过ClassLoader来实现的 核心loader: A:: bootstrap classloader(启动类加载器) -->加载java核心api,包括用户自定义的classloader和另外两个loader B: ExtClassLoader

解决tableView中cell动态加载控件的重用问题

tableView的cell,有时候需要在运行时取得对应的数据后才能够动态的创建该cell中的控件并加载到该cell中,此时,你一定会遇到重用问题,即使你能做到该cell只根据数值加载了一回控件,你也没法保证不出现重用问题:) 效果(请注意查看,移动下面的格子时,上面出现了重用的问题) 源码: YXCell.h // // YXCell.h // YXTableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import

bootstrap中的动态加载出来的图片轮播中的li标签中的class=&quot;active&quot;的动态添加移除

//该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel ol li").toggleClass("active");//重复切换类名“active” }); 遇到的问题:在动态加载出来的轮播中设置了加载时就开始轮播data-ride="carousel"图片可以轮播但是底下的li标签的class没有进行切换.而不加d

关于Unity3D中Resources动态加载NGUI图片的方法

在NGUI中有些图片我需要动态进行变更或者加载,怎么办? 首先在项目中创建一个Resources目录,接着把需要的图片放在这里面,可以有子文件夹么?当然可以,文件结构很重要哦~ NGUI加载图片的方法其实是加载NGUI生成的atlas,大家可以看看NGUI的图集文件(一个material.一个prefab,一张图集),我们要做的就是动态加载这个prefab(它有UIAtlas属性),然后通过图片名称更改图片. 我这里那UISprite来说明,我是这样做的: UIAtlas tu = Resour

Android中的动态加载机制

在目前的软硬件环境下,Native App与Web App在用户体验上有着明显的优势,但在实际项目中有些会因为业务的频繁变更而频繁的升级客户端,造成较差的用户体验,而这也恰恰是Web App的优势.本文对网上Android动态加载jar的资料进行梳理和实践在这里与大家一起分享,试图改善频繁升级这一弊病. Android应用开发在一般情况下,常规的开发方式和代码架构就能满足我们的普通需求.但是有些特殊问题,常常引发我们进一步的沉思.我们从沉思中产生顿悟,从而产生新的技术形式.如何开发一个可以自定义

Android中的动态加载机制--薛彦顺

在目前的软硬件环境下,Native App与Web App在用户体验上有着明显的优势,但在实际项目中有些会因为业务的频繁变更而频繁的升级客户端,造成较差的用户体验,而这也恰恰是Web App的优势.本文对网上Android动态加载jar的资料进行梳理和实践在这里与大家一起分享,试图改善频繁升级这一弊病. Android应用开发在一般情况下,常规的开发方式和代码架构就能满足我们的普通需求.但是有些特殊问题,常常引发我们进一步的沉思.我们从沉思中产生顿悟,从而产生新的技术形式. 如何开发一个可以自定

页面滚动动态加载数据

//返回顶部js $(window).scroll(function() {            var sc = $(window).scrollTop();            //var rwidth=$(window).width()            if (sc > 0) {                $("#goTopBtn").css("display", "block");                $(&

页面滚动动态加载数据,页面下拉自动加载内容 jquery

<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type="text/javascript"></ script> < script type="text/javascript"> $(document).ready(function(){ var range = 50; //距下边界长度/单位px var