Я создал социальную сеть. Вы можете посетить его здесь: 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" />
Пожалуйста, помогите мне решить эту проблему. Спасибо