5
có một dòng từ một plugin mà tôi đang sử dụng mà im cố gắng để hiểu:Không hiểu cách này được gọi là phương pháp fadeIn trong Jquery
$self.hide().attr("src", $self.data(settings.data_attribute))[settings.effect](settings.effect_speed);
tự là một đối tượng jquery, mà trong này mã là một phần tử img dom, nó ẩn nó, sau đó đặt thuộc tính src của đối tượng img này thành thuộc tính data-html5. nhưng bây giờ nó truy cập vào một tài sản trong đối tượng jquery trở lại bởi .attr (, đó là "fadeIn" trong này .nhưng tôi không hiểu, làm jquery đối tượng có được xây dựng trong đó một chức năng tài sản có hiệu lực được xây dựng vào đối tượng jquery? Làm thế nào điều này được dịch để gọi .fadeIn (900) .tôi không thể tìm thấy tài liệu này bất cứ nơi nào trên trang web jquery.Nếu bất cứ ai có thể làm sáng tỏ một số về điều này, cảm ơn bạn. là từ plugin jquery tải chậm của mika tuupola:
(function($, window, document, undefined) {
var $window = $jq191(window);
$jq191.fn.lazyload = function(options) {
var elements = this;
var $container;
var settings = {
threshold : 0,
failure_limit : 0,
event : "scroll",
effect : "show",
container : window,
data_attribute : "original",
skip_invisible : true,
appear : null,
load : null
};
function update() {
var counter = 0;
elements.each(function() {
var $this = $jq191(this);
if (settings.skip_invisible && !$this.is(":visible")) {
return;
}
if ($jq191.abovethetop(this, settings) ||
$jq191.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$jq191.belowthefold(this, settings) &&
!$jq191.rightoffold(this, settings)) {
$this.trigger("appear");
/* if we found an image we'll load, reset the counter */
counter = 0;
} else {
if (++counter > settings.failure_limit) {
return false;
}
}
});
}
if(options) {
/* Maintain BC for a couple of versions. */
if (undefined !== options.failurelimit) {
options.failure_limit = options.failurelimit;
delete options.failurelimit;
}
if (undefined !== options.effectspeed) {
options.effect_speed = options.effectspeed;
delete options.effectspeed;
}
$jq191.extend(settings, options);
}
/* Cache container as jQuery as object. */
$container = (settings.container === undefined ||
settings.container === window) ? $window : $jq191(settings.container);
/* Fire one scroll event per scroll. Not one scroll event per image. */
if (0 === settings.event.indexOf("scroll")) {
$container.bind(settings.event, function(event) {
return update();
});
}
this.each(function() {
var self = this;
var $self = $jq191(self);
self.loaded = false;
/* When appear is triggered load original image. */
$self.one("appear", function() {
if (!this.loaded) {
if (settings.appear) {
var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
}
$jq191("<img />")
.bind("load", function() {
$self
.hide()
.attr("src", $self.data(settings.data_attribute))
[settings.effect](settings.effect_speed);
self.loaded = true;
/* Remove image from array so it is not looped next time. */
var temp = $jq191.grep(elements, function(element) {
return !element.loaded;
});
elements = $jq191(temp);
if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.data(settings.data_attribute));
}
});
/* When wanted event is triggered load original image */
/* by triggering appear. */
if (0 !== settings.event.indexOf("scroll")) {
$self.bind(settings.event, function(event) {
if (!self.loaded) {
$self.trigger("appear");
}
});
}
});
/* Check if something appears when window is resized. */
$window.bind("resize", function(event) {
update();
});
/* With IOS5 force loading images when navigating with back button. */
/* Non optimal workaround. */
if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
$window.bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
elements.each(function() {
$jq191(this).trigger("appear");
});
}
});
}
/* Force initial check if images should appear. */
$jq191(window).load(function() {
update();
});
return this;
};
/* Convenience methods in jQuery namespace. */
/* Use as $jq191.belowthefold(element, {threshold : 100, container : window}) */
$jq191.belowthefold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.height() + $window.scrollTop();
} else {
fold = $jq191(settings.container).offset().top + $jq191(settings.container).height();
}
return fold <= $jq191(element).offset().top - settings.threshold;
};
$jq191.rightoffold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
} else {
fold = $jq191(settings.container).offset().left + $jq191(settings.container).width();
}
return fold <= $jq191(element).offset().left - settings.threshold;
};
$jq191.abovethetop = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollTop();
} else {
fold = $jq191(settings.container).offset().top;
}
return fold >= $jq191(element).offset().top + settings.threshold + $jq191(element).height();
};
$jq191.leftofbegin = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft();
} else {
fold = $jq191(settings.container).offset().left;
}
return fold >= $jq191(element).offset().left + settings.threshold + $jq191(element).width();
};
$jq191.inviewport = function(element, settings) {
return !$jq191.rightoffold(element, settings) && !$jq191.leftofbegin(element, settings) &&
!$jq191.belowthefold(element, settings) && !$jq191.abovethetop(element, settings);
};
/* Custom selectors for your convenience. */
/* Use as $jq191("img:below-the-fold").something() or */
/* $jq191("img").filter(":below-the-fold").something() which is faster */
$jq191.extend($jq191.expr[':'], {
"below-the-fold" : function(a) { return $jq191.belowthefold(a, {threshold : 0}); },
"above-the-top" : function(a) { return !$jq191.belowthefold(a, {threshold : 0}); },
"right-of-screen": function(a) { return $jq191.rightoffold(a, {threshold : 0}); },
"left-of-screen" : function(a) { return !$jq191.rightoffold(a, {threshold : 0}); },
"in-viewport" : function(a) { return $jq191.inviewport(a, {threshold : 0}); },
/* Maintain BC for couple of versions. */
"above-the-fold" : function(a) { return !$jq191.belowthefold(a, {threshold : 0}); },
"right-of-fold" : function(a) { return $jq191.rightoffold(a, {threshold : 0}); },
"left-of-fold" : function(a) { return !$jq191.rightoffold(a, {threshold : 0}); }
});
}) ($ jq191, cửa sổ, tài liệu);
Mã đầy đủ có sẵn ở bất kỳ đâu không? – jgillich