;(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实现。相关推荐

  1. jQuery页面滚动 动态加载图片等元素

    相信大家见过好多随着页面滚动,动态加载图片等元素的网站,我也是,以前见了好多,只是没时间去研究,今天晚上有空,百度了一下找了一个jquery插件,作者张鑫旭,效果挺好,代码也很简单,使用更方便,废话不 ...

  2. html5动态加载图片和加载视频

    这两在做一个动态加载图片的东西,有点类似QQ发说说里面附带图片的那种,经过测试可以任意添加.删除,然后该删除的位置被后一位自动填充,还有一个bug,就是最后一个图片的控件没做处理,删掉最后一个就会导致 ...

  3. 动态加载图片,实现瀑布流效果

    瀑布流 1.瀑布流 瀑布流,可以有多列,每一列的高度可以不相同,但是宽度必须一样: 排列的方式是,从左往右排列,哪一列总高度最小,就优先排序,把图片放在这一列. 这样排完所有的图片后,可以保证每一列的 ...

  4. viewer动态加载图片第一次点击预览图片失败的问题

    如果您搜到这篇文章的话,那估计您遇到跟我一样的问题了. 众所周知,每一个插件都有很多坑,比如说市面上比较火爆的 图片浏览插件viewer,有js版本和jqery版本的,尽管这两个版本不一样,但是大同小 ...

  5. html动态加载图片,javascript实现瀑布流动态加载图片原理

    本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下 鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码 js实现瀑布流效果-动态加载图片 2. CSS代码 ...

  6. Delphi FastReport动态加载图片

    Delphi  FastReport动态加载图片 2011-01-06         作者:李海彬 阅读:684 以前用FastReport制作报表,从来没有打印过图片,这段时间做了个打印个人简历的 ...

  7. vue+elementui 中src动态加载图片的时候不起作用

    vue+elementui 中src动态加载图片的时候不起作用 代码如下: <el-table-column align="center" label="宠物图片& ...

  8. vue 动态加载图片路径报错解决方法

    vue 动态加载图片路径报错解决方法 参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...

  9. 解决问题:swiper动态加载图片后无法滑动

    解决问题:swiper动态加载图片后无法滑动 参考文章: (1)解决问题:swiper动态加载图片后无法滑动 (2)https://www.cnblogs.com/yangguoe/p/9857398 ...

最新文章

  1. IT人不要一辈子做技术
  2. Ubuntu login as root automatically
  3. 3_9 VisitorMode 访问者模式
  4. ssm整合2 增删改
  5. java流数据base64,Base64数据的流解码
  6. MySQL 获取首次登录日期、登录设备号
  7. iPhone 13凌晨发布,电池容量较iPhone 12最高有望提升20%(文末有福利)
  8. 图解HTTP笔记(二)——HTTP状态码
  9. 怎么看so文件是哪个aar引进来的_突破微信限制,超大文件可以随便发
  10. 【转载】标准电阻阻值表及说明
  11. 钽电容技术参数及封装
  12. 发光二极管(一)- 基础知识
  13. 排版——用Markdown写Csdn博客
  14. 3 Directory traversal
  15. 使用 vimdiff 比较文件的技巧
  16. PostOffice
  17. SDL应用之三种字库
  18. (超、深)超像素网络SSN
  19. java自动化测试语言高级之HashMap
  20. 神奇的6666 端口号

热门文章

  1. 图本检索的Zero-Shot超过CLIP模型!FILIP用细粒度的后期交互获得更好的预训练效率。...
  2. ECCV 2020 | 视觉引导的声源分离辅助立体声重构方法 Sep-Stereo
  3. 第四届 AI City 挑战赛 @ CVPR 2020 开始啦!
  4. 谷歌 NAS + 目标检测 新作:SpineNet
  5. 尺度不变人脸检测:Group Sampling
  6. 今日上新:两个图像领域的现金奖励实时竞赛
  7. spark写入oracle 优化,spark读写数据库大表分区性能优化
  8. 一篇文章教会你使用Python中三种简单的函
  9. 这些Python代码技巧,你肯定还不知道
  10. pyTorch自然语言处理简单例子