Ленивые загруженные изображения становятся пустыми для jquery перезагрузки контента - PullRequest
0 голосов
/ 15 апреля 2020

Я создал социальную сеть. Вы можете посетить его здесь: LishUp - что-то другое

На главной странице есть функция загрузки изображений. Я добавил функции отложенной загрузки в эти изображения при их отображении. Моя функция отложенной загрузки дана ниже:

!function(window) {
  var $q = function(q, res) {
      if (document.querySelectorAll) {
        res = document.querySelectorAll(q);
      } else {
        var d = document,
          a = d.styleSheets[0] || d.createStyleSheet();
        a.addRule(q, 'f:b');
        for (var l = d.all, b = 0, c = [], f = l.length; b < f; b++)
          l[b].currentStyle.f && c.push(l[b]);

        a.removeRule(0);
        res = c;
      }
      return res;
    },
    addEventListener = function(evt, fn) {
      window.addEventListener ?
        this.addEventListener(evt, fn, false) :
        (window.attachEvent) ?
        this.attachEvent('on' + evt, fn) :
        this['on' + evt] = fn;
    },
    _has = function(obj, key) {
      return Object.prototype.hasOwnProperty.call(obj, key);
    };

  function loadImage(el, fn) {
    var img = new Image(),
      src = el.getAttribute('data-src');
    img.onload = function() {
      if (!!el.parent)
        el.parent.replaceChild(img, el)
      else
        el.src = src;

      fn ? fn() : null;
    }
    img.src = src;
  }

  function elementInViewport(el) {
    var rect = el.getBoundingClientRect()

    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    )
  }

  var images = new Array(),
    query = $q('img.lazy'),
    processScroll = function() {
      for (var i = 0; i < images.length; i++) {
        if (elementInViewport(images[i])) {
          loadImage(images[i], function() {
            images.splice(i, i);
          });
        }
      };
    };

  // Array.prototype.slice.call is not callable under our lovely IE8
  for (var i = 0; i < query.length; i++) {
    images.push(query[i]);
  };

  processScroll();
  addEventListener('scroll', processScroll);
}(this);

Когда пользователь будет любить или комментировать в сообщении, я использую код jquery для обновления sh содержимого в конкретном элементе div, который включает в себя изображения тоже. Вот мой jquery код:

$("#leash").load(" #leash");

lea sh - это идентификатор элемента div, который включает в себя изображения и сообщения.

Но когда jquery Код обновляет элемент div, изображения становятся пустыми. Ничего не показывает

ПРИМЕЧАНИЕ. ИЗОБРАЖЕНИЯ ПОКАЗАНЫ НИЖЕ

<img data-src="link" class="lazy" />        

Пожалуйста, помогите мне решить эту проблему. Спасибо

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