我正在使用延迟加载在我的网站上显示多个闪烁图像。但这使页面滚动非常慢。我正在寻找一种使用 AJAX调用加载图像的更快方法。
JavaScript:
var self = $(this);
$.ajax({
url : base_url + 'images/load/'+params,
type : 'get',
async : true,
timeout : 10000
})
.done(function(data, status, request) {
self[0].src = 'data:image/jpeg;base64,' + data;
})
.error(function(xhr, textStatus, errorThrown ) {
$('#report-image').hide();
self[0].src = self.data('onerror');
})
HTML:
<div class="custom-image">
<img class="lazy-load" alt="Shree Siddhivinayak Image" data-error="example.com/img/default.jpg" data-src="example.com/images/load/name:shree-siddhivinayak" src="example.com/img/lazyload/onepixel.jpg">
</div>
PHP:
$image = curl_call($getImagebyUrl); // Get image by curl call to Flicker Image URL
echo base64_encode($image); exit;