关于滚动加载图片问题

a626846568 2012-06-27 03:37:28
应实际需要，想把竖向滚动加载图片改成横向滚动加载图片，请教应该如何修改!


<img title="公司规模" alt="公司规模" class="scrollLoading" xSrc="images/companySize/15.jpg" src="http://images.cnblogs.com/cnblogs_com/Darren_code/302725/o_pixel.gif" style="background:url(http://images.cnblogs.com/cnblogs_com/Darren_code/302725/o_108.gif) no-repeat center;">





<script type="text/javascript">

    var scrollLoad = (function (options) {

        var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 300} : { src: options.src || 'xSrc', time: options.time ||300};

        var camelize = function (s) {

            return s.replace(/-(\w)/g, function (strMatch, p1) {

                return p1.toUpperCase();

            });

        };

        this.getStyle = function (element, property) {

            if (arguments.length != 2) return false;

            var value = element.style[camelize(property)];

            if (!value) {

                if (document.defaultView && document.defaultView.getComputedStyle) {

                    var css = document.defaultView.getComputedStyle(element, null);

                    value = css ? css.getPropertyValue(property) : null;

                } else if (element.currentStyle) {

                    value = element.currentStyle[camelize(property)];

                }

            }

            return value == 'auto' ? '' : value;

        };

        var _init = function () {

            var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,

                offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),

                docImg = document.images,

                _len = docImg.length;

            if (!_len) return false;

            for (var i = 0; i < _len; i++) {

                var attrSrc = docImg[i].getAttribute(defaults.src),

                    o = docImg[i], tag = o.nodeName.toLowerCase();

                if (o) {

                    postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));

                    if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) {

                        if (tag === "img" && attrSrc !== null) {

                            o.setAttribute("src", attrSrc);

                        }

                        o = null;

                    }

                }

            };

            window.onscroll = function () {

                setTimeout(function () {

                    _init();

                }, defaults.time);

            }

        };

        return _init();

    });

    scrollLoad();

</script>
...全文
181 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
a626846568 2012-06-28
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]

引用楼主 的回复:
应实际需要，想把竖向滚动加载图片改成横向滚动加载图片，请教应该如何修改!
HTML code

<img title="公司规模" alt="公司规模" class="scrollLoading" xSrc="images/companySize/15.jpg" src="http://images.cnblogs.com/cnblogs_com/Darren_co……
[/Quote]

额，我不是要滚动呀，是要加载图片，即还没显示的到的页面图片不加载，等滚动条滚动到的时候才加载
LanFavourite 2012-06-28
  • 打赏
  • 举报
 回复
[Quote=引用楼主 的回复:]
应实际需要，想把竖向滚动加载图片改成横向滚动加载图片，请教应该如何修改!
HTML code

<img title="公司规模" alt="公司规模" class="scrollLoading" xSrc="images/companySize/15.jpg" src="http://images.cnblogs.com/cnblogs_com/Darren_code/302725/o_pi……
[/Quote]

回复楼主：



     

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

		<title>套鼠标控制左右滚动图片带自动翻滚</title>

		<style type="text/css">

<!--

.rollBox {

	width: 704px;

	overflow: hidden;

	padding: 12px 0 5px 6px;

}



.rollBox .LeftBotton {

	height: 52px;

	width: 19px;

	background: url(/jscss/demoimg/200901/job_mj_069.gif) no-repeat 11px 0;

	overflow: hidden;

	float: left;

	display: inline;

	margin: 25px 0 0 0;

	cursor: pointer;

}



.rollBox .RightBotton {

	height: 52px;

	width: 20px;

	background: url(/jscss/demoimg/200901/job_mj_069.gif) no-repeat -8px 0;

	overflow: hidden;

	float: left;

	display: inline;

	margin: 25px 0 0 0;

	cursor: pointer;

}



.rollBox .Cont {

	width: 530px;

	overflow: hidden;

	float: left;

}



.rollBox .ScrCont {

	width: 10000000px;

}



.rollBox .Cont .pic {

	width: 132px;

	float: left;

	text-align: center;

}



.rollBox .Cont .pic img {

	padding: 4px;

	background: #fff;

	border: 1px solid #ccc;

	display: block;

	margin: 0 auto;

}



.rollBox .Cont .pic p {

	line-height: 26px;

	color: #505050;

}



.rollBox .Cont a:link,.rollBox .Cont a:visited {

	color: #626466;

	text-decoration: none;

}



.rollBox .Cont a:hover {

	color: #f00;

	text-decoration: underline;

}



.rollBox #List1,.rollBox #List2 {

	float: left;

}

-->

</style>

	</head>

	<body>

		<div class="rollBox">

			<div class="LeftBotton" onmousedown="ISL_GoUp()"

				onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>

			<div class="Cont" id="ISL_Cont">

				<div class="ScrCont">

					<div id="List1">



						<!-- 图片列表 begin -->

						<div class="pic">

							<a href="/" target="_blank"><img

									src="/jscss/demoimg/wall_s1.jpg" width="109" height="87" />

							</a>

							<p>

								<a href="#" target="_blank">风景美如画</a>

							</p>

						</div>



						<div class="pic">

							<a href="/" target="_blank"><img

									src="/jscss/demoimg/wall_s2.jpg" width="109" height="87" />

							</a>

							<p>

								<a href="#" target="_blank">千里之行</a>

							</p>

						</div>

						<div class="pic">

							<a href="/" target="_blank"><img

									src="/jscss/demoimg/wall_s3.jpg" width="109" height="87" />

							</a>

							<p>

								<a href="#" target="_blank">学习源码站</a>

							</p>

						</div>

						<div class="pic">

							<a href="/" target="_blank"><img

									src="/jscss/demoimg/wall_s4.jpg" width="109" height="87" />

							</a>

							<p>

								<a href="#" target="_blank">每一款都测试</a>

							</p>

						</div>

						<div class="pic">

							<a href="/" target="_blank"><img

									src="/jscss/demoimg/wall_s5.jpg" width="109" height="87"

									alt="你难道不喜欢" />

							</a>

							<p>

								<a href="#" target="_blank">你难道不喜欢</a>

							</p>

						</div>

						<div class="pic">

							<a href="/" target="_blank"><img

									src="/jscss/demoimg/wall_s6.jpg" width="109" height="87" />

							</a>

							<p>

								<a href="#" target="_blank">你太令我失望了</a>

							</p>

						</div>

						<div class="pic">

							<a href="/" target="_blank"><img

									src="/jscss/demoimg/wall_s7.jpg" width="109" height="87" />

							</a>

							<p>

								<a href="#" target="_blank">今天早点睡</a>

							</p>

						</div>

						<!-- 图片列表 end -->



					</div>

					<div id="List2"></div>

				</div>

			</div>

			<div class="RightBotton" onmousedown="ISL_GoDown()"

				onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>

		</div>

		</div>



		<script language="javascript" type="text/javascript">

<!--//--><![CDATA[//><!--

//图片滚动列表 mengjia 070816

var Speed = 1; //速度(毫秒)

var Space = 5; //每次移动(px)

var PageWidth = 528; //翻页宽度

var fill = 0; //整体移位

var MoveLock = false;

var MoveTimeObj;

var Comp = 0;

var AutoPlayObj = null;

GetObj("List2").innerHTML = GetObj("List1").innerHTML;

GetObj('ISL_Cont').scrollLeft = fill;

GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}

GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}

AutoPlay();

function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}

function AutoPlay(){ //自动滚动

 clearInterval(AutoPlayObj);

 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间

}

function ISL_GoUp(){ //上翻开始

 if(MoveLock) return;

 clearInterval(AutoPlayObj);

 MoveLock = true;

 MoveTimeObj = setInterval('ISL_ScrUp();',Speed);

}

function ISL_StopUp(){ //上翻停止

 clearInterval(MoveTimeObj);

 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){

  Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);

  CompScr();

 }else{

  MoveLock = false;

 }

 AutoPlay();

}

function ISL_ScrUp(){ //上翻动作

 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}

 GetObj('ISL_Cont').scrollLeft -= Space ;

}

function ISL_GoDown(){ //下翻

 clearInterval(MoveTimeObj);

 if(MoveLock) return;

 clearInterval(AutoPlayObj);

 MoveLock = true;

 ISL_ScrDown();

 MoveTimeObj = setInterval('ISL_ScrDown()',Speed);

}

function ISL_StopDown(){ //下翻停止

 clearInterval(MoveTimeObj);

 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){

  Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;

  CompScr();

 }else{

  MoveLock = false;

 }

 AutoPlay();

}

function ISL_ScrDown(){ //下翻动作

 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}

 GetObj('ISL_Cont').scrollLeft += Space ;

}

function CompScr(){

 var num;

 if(Comp == 0){MoveLock = false;return;}

 if(Comp < 0){ //上翻

  if(Comp < -Space){

   Comp += Space;

   num = Space;

  }else{

   num = -Comp;

   Comp = 0;

  }

  GetObj('ISL_Cont').scrollLeft -= num;

  setTimeout('CompScr()',Speed);

 }else{ //下翻

  if(Comp > Space){

   Comp -= Space;

   num = Space;

  }else{

   num = Comp;

   Comp = 0;

  }

  GetObj('ISL_Cont').scrollLeft += num;

  setTimeout('CompScr()',Speed);

 }

}

//--><!]]>

</script>

	</body>

</html>


楼主，试试以上的代码，效果还不错。
a626846568 2012-06-27
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

楼主，我拿这个代码在自己电脑上测试，图片没出来
[/Quote]





<img class="scrollLoading" xSrc="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_1.jpg" src="http://images.cnblogs.com/cnblogs_com/Darren_code/302725/o_pixel.gif" width="200" height="250" border="0" style="background:url(http://images.cnblogs.com/cnblogs_com/Darren_code/302725/o_108.gif) no-repeat center;" /><Br /><Br />


把图片换成这个就就可以 要多黏贴几个到有滚动条才有效果
风一样的大叔 2012-06-27
  • 打赏
  • 举报
 回复
楼主，我拿这个代码在自己电脑上测试，图片没出来
Jquery.ScrollLoading图片延迟加载插件
一个大神写的jQuery滚动加载插件scrollLoading测试很好用。
Gallery和ImageSwitcher同步自动(滚动)播放图片库
Gallery和ImageSwitcher同步自动(滚动)播放图片库
glide-3.7.0.jar
Glide 一个专注于平滑滚动的图片加载和缓存库
vue滚动加载数据
在做移动端业务的时候，经常需要对数据进行滚动加载。所谓的滚动加载，其实就是像小程序那样的，触底加载数据。别听的字里行间听的那么高大上。当然，对于滚动加截，常见的也就跟我们在PC端的分页的业务逻辑是一样的...
滚动加载图片（懒加载）实现原理
一、什么是图片滚动加载？ 　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置...
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章