jQuery 只加载当前浏览器显示部分屏幕的图片
2011-10-21 22:15
429 查看
<!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>
<title>只加载当前浏览器显示部分屏幕的图片</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{border:0;}
a{display:inline;float:left;margin:55px;background:#ccc;overflow:hidden;font-size:0;}
</style>
<script src="/images/jquery-1.4.2.min.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 = "a.gif";
runing();//页面刚载入时判断要显示的图片
//****************************************
$(window).scroll(function(){
runing();//滚动刷新
})
//****************************************
function runing(){
$img.each(function(i){//遍历img
var $src = $img.eq(i).attr("original");//获取当前img URL地址
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>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div id="show">
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/2.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/2.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/2.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/9.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/2.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/7.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/5.jpg"></a>
<a href="#"><img src="/images/20110520/blank.gif" width="160" height="160" original="/images/2.jpg"></a>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 动态加载当前屏幕的网页图片（网页拖动时图片加载显示）
- 动态加载当前屏幕的网页图片（网页拖动时图片加载显示）
- JQuery监听页面滚动总结和浏览器动态显示加载图片
- JQuery计算当前Dom结构在浏览器窗口中被显示方法（懒加载原理）
- jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
- 使用jquery给加载失败的img元素显示默认图片
- 又一个jquery轮播效果，焦点图，带数字显示序号，这个可以添加对应标题在图片上，支持主流浏览器
- ListView滚动时加载图片（只加载当前屏幕图片）
- jQuery图片加载显示loading效果
- VS2005下使用VC，部分断点无效，显示『当前不会命中断点。还没有为该文档加载任何符号』
- lanyload加载当前屏幕图片
- 【BUG解决】Android ListView只加载当前屏幕内的图片（解决list滑动时加载卡顿）
- jquery显示loading图片直到网页加载完成的方法
- 用imageloader异步加载图片的问题，怎么实现只加载当前屏幕内的图片
- Jquery判断页面图片是否加载失败,加载失败则显示默认图片
- 使用JQuery解决图片自适应大小问题（比较好的解决图片从加载到完全显示的大小问题）
- 部分手机浏览器图片不显示问题
- 关于在struts2中利用jquery中如何动态从数据库中加载图片并显示
- jquery 使用dialog弹窗显示在整个屏幕上，而不是只遮盖当前的ifream或div，另附dialog中加返回按钮，设置高宽等
- 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片