下面这段js,怎么修改获取指定的img元素

killers002 2015-09-03 10:47:24
是一个图片延迟加载的js
结果这个页面上的所有img元素都应用了,这不是我想要的效果
我想要的是class为image样式的图片应用这个延迟加载
那么该如何修改下面这段js呢

因本人对js一窍不通 麻烦好心人讲解的劲量详细些




<script>

/*
---
description: LazyLoad

authors:
- David Walsh (http://davidwalsh.name)

license:
- MIT-style license

requires:
core/1.2.1: "*"

provides:
- LazyLoad
...
*/
var LazyLoad = new Class({

Implements: [Options,Events],

/* additional options */
options: {
range: 200,
elements: "img",
container: window,
mode: "vertical",
realSrcAttribute: "data-src",
useFade: true
},

/* initialize */
initialize: function(options) {

// Set the class options
this.setOptions(options);

// Elementize items passed in
this.container = document.id(this.options.container);
this.elements = $$(this.options.elements);

// Set a variable for the "highest" value this has been
this.largestPosition = 0;

// Figure out which axis to check out
var axis = (this.options.mode == "vertical" ? "y": "x");

// Calculate the offset
var offset = (this.container != window && this.container != document.body ? this.container : "");

// Find elements remember and hold on to
this.elements = this.elements.filter(function(el) {
// Make opacity 0 if fadeIn should be done
if(this.options.useFade) el.setStyle("opacity",0);
// Get the image position
var elPos = el.getPosition(offset)[axis];
// If the element position is within range, load it
if(elPos < this.container.getSize()[axis] + this.options.range) {
this.loadImage(el);
return false;
}
return true;
},this);

// Create the action function that will run on each scroll until all images are loaded
var action = function(e) {

// Get the current position
var cpos = this.container.getScroll()[axis];

// If the current position is higher than the last highest
if(cpos > this.largestPosition) {

// Filter elements again
this.elements = this.elements.filter(function(el) {

// If the element is within range...
if((cpos + this.options.range + this.container.getSize()[axis]) >= el.getPosition(offset)[axis]) {

// Load the image!
this.loadImage(el);
return false;
}
return true;

},this);

// Update the "highest" position
this.largestPosition = cpos;
}

// relay the class" scroll event
this.fireEvent("scroll");

// If there are no elements left, remove the action event and fire complete
if(!this.elements.length) {
this.container.removeEvent("scroll",action);
this.fireEvent("complete");
}

}.bind(this);

// Add scroll listener
this.container.addEvent("scroll",action);
},
loadImage: function(image) {
// Set load event for fadeIn
if(this.options.useFade) {
image.addEvent("load",function(){
image.fade(1);
});
}
// Set the SRC
image.set("src",image.get(this.options.realSrcAttribute));
// Fire the image load event
this.fireEvent("load",[image]);
}
});

/* do it! */
window.addEvent("domready",function() {
var lazyloader = new LazyLoad({/*
onScroll: function() { console.warn("scroll!"); },
onLoad: function(img) { console.warn("load!", img); },
onComplete: function() { console.warn("complete!"); }
*/
});
});

</script>
...全文
96 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

50,336

社区成员

发帖
与我相关
我的任务
社区描述
Java相关技术讨论
javaspring bootspring cloud 技术论坛(原bbs)
社区管理员
  • Java相关社区
  • 小虚竹
  • 谙忆
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧