javascript瀑布流式图片懒加载实例_javascript技巧
程序员文章站
2022-03-19 11:49:49
...
最近项目使用到了“懒加载”,现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js 。当然也可以和jQuery 通用。
代码如下:
/** * Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * 图片的懒加载 **/ function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject, imgDataSrc, localUrl; localUrl = location.href; // 获取当前浏览器可视区域的高度 mobileHeight = $(window).height(); return function(co) { var conf = { 'loadfirst': true, 'loadimg': true }; for (var item in conf) { if (item in co) { conf[item] = co[item]; } } var that = {}; var _this = {}; /** * [replaceImgSrc 动态替换节点中的src] * @param {[type]} tempObject [description] * @return {[type]} [description] */ _this.replaceImgSrc = function(tempObject) { var srcValue; $.each(tempObject, function(i, item) { imgObject = $(item).find('img[data-lazysrc]'); imgObject.each(function(i) { imgDataSrc = $(this).attr('data-lazysrc'); srcValue = $(this).attr('src'); if (srcValue == '#') { if (imgDataSrc) { $(this).attr('src', imgDataSrc); $(this).removeAttr('data-lazysrc'); } } }); }); }; /** * 首屏判断屏幕上是否出现imglazy节点,有的话就加载图片 * @param {[type]} i) { currentNodeTop [description] * @return {[type]} [description] */ _this.loadFirstScreen = function() { if (conf.loadfirst) { lazyNode.each(function(i) { currentNodeTop = $(this).offset().top; if (currentNodeTop
希望本文对大家学习javascript图片懒加载有所帮助。
推荐阅读
-
鼠标移动到图片名上,显示图片的简单实例_javascript技巧
-
javascript实现图片懒加载实例
-
JavaScript实现图片懒加载的方法分析
-
Javascript之图片的延迟加载的实例详解
-
Javascript实现图片懒加载插件的方法
-
js或者jquery判断图片是否加载完成实现代码_javascript技巧
-
经常用的图片在容器中的水平垂直居中实例_javascript技巧
-
IE6,IE7下js动态加载图片不显示错误_javascript技巧
-
经常用的图片在容器中的水平垂直居中实例_javascript技巧
-
多种方法实现load加载完成后把图片一次性显示出来_javascript技巧