网页动态加载图片 通过JS和jquery实现。
;(function($){$.fn.extend({scrollLoad:function(options){var options = $.extend({src:'xsrc', //预加载在<img> 中的属性值 如<img xsrc='img.jpg' />delayTime:300 // 滚动条停止在一个地方超过300毫秒,才开始加载 },options);var _this = this; //将this保存下来。 init.call(_this); //页面载入后马上加载一次。 $(window).scroll(function(){ //给窗口绑定事件,当滚动条滚动时,加载图片window.setTimeout(function(){init.call(_this); },options.delayTime); });function init(){$(this).each(function(i,n){if(n.tagName.toLowerCase() !=='img'){return; }if($(n).attr(options.src) === 'undefined'){return; }var windowTop = $(document).scrollTop(),windowBottom = windowTop + $(window).height(),imgTop = $(n).offset().top,imgBottom = imgTop + $(n).height();if(imgBottom>windowTop && imgTop<windowBottom){$(n).attr('src',$(n).attr(options.src)).removeAttr(options.src);}});};}});})(jQuery);
JQUERY插件形式。
后面会有附件可以下载
使用方式,引入jquery核心文件,和这个插件
<script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript" src="scrollLoad/jquery.scrollLoad.js"></script>
通过jquery选择器选择需要动态加载的图片,如果是整个页面所有的图片,下面是代码
$('img').scrollLoad();
可以提供1个对象参数,包含两个属性,
{src:'xsrc', //预加载在<img> 中的属性值 如<img xsrc='img.jpg' />delayTime:300 // 滚动条停止在一个地方超过300毫秒,才开始加载}
src 默认存放图片路劲的属性名
delayTime 滚动到一个位置后延迟多少时间加载 单位毫秒。
下面是通过JS实现,方法和jquery一样,比较麻烦的地方是处理浏览器的兼容性。代码来自互联网,感谢!
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 () {// offsetPage 页面滚动条的为止 即页面页面可视区域顶端距离整个文档上方距离// offsetWindow offsetPage+页面可视区域的高度 可视区域底部距离文档上方距离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();
参数同JQ
scrollLoad({time:300,scr:'xsrc'});
最后提一句,在HTML里 <img scr='1px.gif' xsrc /> 中图片路径部分最好填个1像素的图片,不然在IE下会有恶心的叉叉。。
当然也可以放一个动态的菊花!!
不过菊花还是作为背景较好,因为图片出现在可视区域,菊花就被替换了。看不到效果。
突然发现,没找到这个博客上传附件的地方,那就算了。
邪恶的多放几多菊花
--------------------------- END-------------------------------
转载于:https://www.cnblogs.com/iu90/archive/2013/05/11/3072753.html
网页动态加载图片 通过JS和jquery实现。相关推荐
- jQuery页面滚动 动态加载图片等元素
相信大家见过好多随着页面滚动,动态加载图片等元素的网站,我也是,以前见了好多,只是没时间去研究,今天晚上有空,百度了一下找了一个jquery插件,作者张鑫旭,效果挺好,代码也很简单,使用更方便,废话不 ...
- html5动态加载图片和加载视频
这两在做一个动态加载图片的东西,有点类似QQ发说说里面附带图片的那种,经过测试可以任意添加.删除,然后该删除的位置被后一位自动填充,还有一个bug,就是最后一个图片的控件没做处理,删掉最后一个就会导致 ...
- 动态加载图片,实现瀑布流效果
瀑布流 1.瀑布流 瀑布流,可以有多列,每一列的高度可以不相同,但是宽度必须一样: 排列的方式是,从左往右排列,哪一列总高度最小,就优先排序,把图片放在这一列. 这样排完所有的图片后,可以保证每一列的 ...
- viewer动态加载图片第一次点击预览图片失败的问题
如果您搜到这篇文章的话,那估计您遇到跟我一样的问题了. 众所周知,每一个插件都有很多坑,比如说市面上比较火爆的 图片浏览插件viewer,有js版本和jqery版本的,尽管这两个版本不一样,但是大同小 ...
- html动态加载图片,javascript实现瀑布流动态加载图片原理
本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下 鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码 js实现瀑布流效果-动态加载图片 2. CSS代码 ...
- Delphi FastReport动态加载图片
Delphi FastReport动态加载图片 2011-01-06 作者:李海彬 阅读:684 以前用FastReport制作报表,从来没有打印过图片,这段时间做了个打印个人简历的 ...
- vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用 代码如下: <el-table-column align="center" label="宠物图片& ...
- vue 动态加载图片路径报错解决方法
vue 动态加载图片路径报错解决方法 参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...
- 解决问题:swiper动态加载图片后无法滑动
解决问题:swiper动态加载图片后无法滑动 参考文章: (1)解决问题:swiper动态加载图片后无法滑动 (2)https://www.cnblogs.com/yangguoe/p/9857398 ...
最新文章
- IT人不要一辈子做技术
- Ubuntu login as root automatically
- 3_9 VisitorMode 访问者模式
- ssm整合2 增删改
- java流数据base64,Base64数据的流解码
- MySQL 获取首次登录日期、登录设备号
- iPhone 13凌晨发布,电池容量较iPhone 12最高有望提升20%(文末有福利)
- 图解HTTP笔记(二)——HTTP状态码
- 怎么看so文件是哪个aar引进来的_突破微信限制,超大文件可以随便发
- 【转载】标准电阻阻值表及说明
- 钽电容技术参数及封装
- 发光二极管(一)- 基础知识
- 排版——用Markdown写Csdn博客
- 3 Directory traversal
- 使用 vimdiff 比较文件的技巧
- PostOffice
- SDL应用之三种字库
- (超、深)超像素网络SSN
- java自动化测试语言高级之HashMap
- 神奇的6666 端口号
热门文章
- 图本检索的Zero-Shot超过CLIP模型!FILIP用细粒度的后期交互获得更好的预训练效率。...
- ECCV 2020 | 视觉引导的声源分离辅助立体声重构方法 Sep-Stereo
- 第四届 AI City 挑战赛 @ CVPR 2020 开始啦!
- 谷歌 NAS + 目标检测 新作:SpineNet
- 尺度不变人脸检测:Group Sampling
- 今日上新:两个图像领域的现金奖励实时竞赛
- spark写入oracle 优化,spark读写数据库大表分区性能优化
- 一篇文章教会你使用Python中三种简单的函
- 这些Python代码技巧,你肯定还不知道
- pyTorch自然语言处理简单例子