I have this code in html:
echo '<div class="sponsors__item-bg-img lazy-load" data-original="'.$sponsor_item['image'].'" style="background-image: url();" src="https://static.questex.asia/template7/images/grey.gif" ></div></a>';
And the jquery.lazyload.js got this part:
$self.one("appear", function() {
if (!this.loaded) {
if (settings.appear) {
var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
}
$("<img />")
.bind("load", function() {
var original = $self.attr("data-" + settings.data_attribute);
$self.hide();
if ($self.is("img")) {
$self.attr("src", original);
} else {
$self.css("background-image", "url('" + original + "')");
}
$self[settings.effect](settings.effect_speed);
self.loaded = true;
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.attr("data-" + settings.data_attribute));
}
});
However, the final result is the image is not loaded, because the url is not added by the js:
<div class="sponsors__item-bg-img lazy-load" data-original="https://img.questex.asia/sites/default/files/styles/219x164/public/BizProLogo.jpg?itok=KLf9ojX0&timestamp=1527822985" style="background-image: url();" src="https://static.questex.asia/template7/images/grey.gif"></div>
Anyone know how can i check what happened or how should i resolve the problem? Thanks.
bind()was deprecated a long time ago.on()is the preferred method now. Check you're using an up to date version of jQuery. With regard to the issue, useconsole.log(original)in theloadevent handler to check what the value is. It would appear to be empty. If that's the case check what thedataattribute you're reading holds at runtime.console.log()to check what its value is