Я использую плагин lazyload xt на сайте.Он работает нормально, но в качестве модификации я хочу пропустить кэшированные изображения, поэтому я добавил немного кода, как показано ниже.Но похоже, что он работает неправильно.
Я ввел новую функцию, как показано ниже
function cached(url) {
var test = document.createElement("img");
test.src = url;
return test.complete || test.width + test.height > 0;
}
И я звоню, как показано ниже.В идеале он должен пропускать только кэшированные изображения.Но все изображения пропускаются даже без кэшированных изображений.Я вижу их на вкладке сетевых запросов браузера Chrome.
function checkLazyElements(force) {
if (!elements.length) {
return;
}
force = force || options.forceLoad;
topLazy = Infinity;
var viewportTop = scrollTop(),
viewportHeight = window.innerHeight || docElement.clientHeight,
viewportWidth = window.innerWidth || docElement.clientWidth,
i,
length;
for (i = 0, length = elements.length; i < length; i++) {
var $el = elements[i],
el = $el[0],
objData = $el[lazyLoadXT],
removeNode = false,
visible = force || $data(el, dataLazied) < 0,
topEdge;
var srcAttr = objData.srcAttr,
src = $isFunction(srcAttr) ? srcAttr($el) : el.getAttribute(srcAttr);
// Checking cached image
visible = cached(src) ? true : visible;
// remove items that are not in DOM
if (!$.contains(docElement, el)) {
removeNode = true;
} else if (force || !objData.visibleOnly || el.offsetWidth || el.offsetHeight) {
if (!visible) {
var elPos = el.getBoundingClientRect(),
edgeX = objData.edgeX,
edgeY = objData.edgeY;
topEdge = (elPos.top + viewportTop - edgeY) - viewportHeight;
if ($(el).hasClass("carousel-image") || $(el).hasClass("video-thumbnail-image")) {
visible = (topEdge <= viewportTop && elPos.bottom > -edgeY &&
elPos.left <= viewportWidth + edgeX && elPos.right > -edgeX);
}
else {
visible = isElementVisible(el);
}
}
if (visible) {
$el.on(load_error, triggerLoadOrError);
triggerEvent('show', $el);
var srcAttr = objData.srcAttr,
src = $isFunction(srcAttr) ? srcAttr($el) : el.getAttribute(srcAttr);
if (src) {
el.src = src;
}
removeNode = true;
} else {
if (topEdge < topLazy) {
topLazy = topEdge;
}
}
}
if (removeNode) {
$data(el, dataLazied, 0);
elements.splice(i--, 1);
length--;
}
}
if (!length) {
triggerEvent('complete', $(docElement));
}
}
Какие-нибудь мысли?Спасибо