网站图片太多，怎样按当前浏览页面（屏幕下拉顺序）加载图片？
2个回答
展开全部
这个问题可以用图片预加载来解决：
1、为网站设置一个默认图片，比如用灰色的logo图，把这个图片压缩到足够小。为所有img标签设置这个图为默认图，把实际地址当作一个数据例如data-src存储在img上。
2、当用户滚动鼠标滚轴时，判断当前图片是否已经进入了显示区域，进入了就替换掉img的src地址为data-src，开始加载图片。
3、这样网站一开始进入时，只加载已经在显示区域的图片，大量未进入区域的图片只是加载了一个很小的默认占位图。
逻辑就是这样，具体可以去找些插件办到，判断是否进入显示区域的逻辑代码其实还是需要挺缜密的。自己写不出来的话可以去百度一些插件。
1、为网站设置一个默认图片，比如用灰色的logo图，把这个图片压缩到足够小。为所有img标签设置这个图为默认图，把实际地址当作一个数据例如data-src存储在img上。
2、当用户滚动鼠标滚轴时，判断当前图片是否已经进入了显示区域，进入了就替换掉img的src地址为data-src，开始加载图片。
3、这样网站一开始进入时，只加载已经在显示区域的图片，大量未进入区域的图片只是加载了一个很小的默认占位图。
逻辑就是这样，具体可以去找些插件办到，判断是否进入显示区域的逻辑代码其实还是需要挺缜密的。自己写不出来的话可以去百度一些插件。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
根据滚动条下拉而延迟加载显示图片特效，通过jquery来实现这个图片延迟加载显示特效，当用户下拉滚动条时才加载图片。
<!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=utf-8" />
<title></title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
var $winH = $(window).height();
var $img = $("#show img");
var $imgH = parseInt($img.height()/2);
var $srcDef = "http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif";
runing();
$(window).scroll(function(){
runing();
})
function runing(){
$img.each(function(i){
var $src = $img.eq(i).attr("original");
var $scroTop = $img.eq(i).offset();
if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH)
{
if($img.eq(i).attr("src") == $srcDef){
$img.eq(i).hide();
}
$img.eq(i).attr("src",function(){return $src}).fadeIn(300);
}
})
}
})
</script>
<style type="text/css">
*{ border:0;}
a{ display:inline; float:left; margin:55px; background:#ccc; overflow:hidden; font-size:0;}
</style>
</head>
<body>
<div id="show">
<a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
<a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
