LazyLoadXt обход кэшированных изображений Jquery - PullRequest
0 голосов
/ 05 декабря 2018

Я использую плагин 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));
        }
    }

Какие-нибудь мысли?Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...