ajax实现图片懒加载 需要jQuery吗
时间: 2023-06-03 10:04:29 浏览: 67
可以使用jQuery实现图片懒加载,但不是必须的,也可以使用原生JavaScript来实现。其中比较常用的技术是使用Intersection Observer API来判断图片是否进入了可视区域并加载。
相关问题
jquery ajax 异步加载图片
可以使用jQuery的ajax方法来异步加载图片。下面是一个示例代码:
```javascript
$.ajax({
url: 'image.jpg',
method: 'GET',
xhrFields: {
responseType: 'blob'
},
success: function(data) {
var img = new Image();
img.onload = function() {
// 图片加载完成后的处理逻辑
$('#myImage').append(img);
};
img.src = URL.createObjectURL(data);
},
error: function(xhr, status, error) {
console.log('图片加载失败');
}
});
```
在上面的代码中,我们使用了jQuery的ajax方法来发送GET请求,设置了`responseType`为`blob`,这样返回的数据将以二进制形式接收。当请求成功后,我们创建了一个新的Image对象,并设置其`src`属性为通过`URL.createObjectURL()`方法生成的URL。最后,将图片元素添加到页面中。
请注意,上述代码中的`image.jpg`是图片的URL地址,你需要将其替换为实际的图片地址。
jQuery图片懒加载,,举例
好的,关于jQuery图片懒加载,您可以这样使用:
1. 在HTML中添加图片标签,将图片SRC属性设为空,例如:<img class="lazy" src="" data-original="image.jpg"/>
2. 在页面底部引入jQuery库和lazyload插件库,例如:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
3. 在JavaScript中添加以下代码实现懒加载:
$(function() {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
这样做可以大大提高图片加载速度,减少页面加载时间。希望对您有帮助!