如何使用AJAX快速加载第三方域图像?

时间:2018-09-24 14:34:14

标签: javascript php jquery html lazy-loading

我正在使用延迟加载在我的网站上显示多个闪烁图像。但这使页面滚动非常慢。我正在寻找一种使用 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;

0 个答案:

没有答案