jquery实现懒加载

最新推荐文章于 2023-09-08 17:29:16 发布

歚木xing

最新推荐文章于 2023-09-08 17:29:16 发布

阅读量480

点赞数

分类专栏：随笔文章标签： jquery 懒加载

本文链接：https://blog.csdn.net/datuoxiea/article/details/77193886

版权

随笔专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章参考：http://code.ciaoca.com/jquery/lazyload/

上实例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<title>jQuery Lazy Load 图片延迟加载 » 使用淡入动画效果 » 在线演示 - 前端开发仓库</title>

</head>
<body>
<div class="wrap">

<div class="example">
<img src="images/yuan.jpg" data-original="images/hou.jpg" width="765" height="574" alt="BMW M1 Hood">
<img src="images/yuan.jpg" data-original="images/hou.jpg" width="765" height="574" alt="BMW M1 Side">
<img src="images/yuan.jpg" data-original="images/hou.jpg" width="765" height="574" alt="Viper 1">
<img src="images/yuan.jpg" data-original="images/hou.jpg" width="765" height="574" alt="Viper Corner">
<img src="images/yuan.jpg" data-original="images/hou.jpg" width="765" height="574" alt="BMW M3 GT">
<img src="images/yuan.jpg" data-original="images/hou.jpg" width="765" height="574" alt="Corvette Pitstop">
</div>

</div>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script>
$(function(){
$('img').lazyload({
effect:'fadeIn'
/*
,
appear:function(elements_left, settings) {
console.log('appear');
console.log(elements_left);
//console.log(this, elements_left, settings);
},
load:function(elements_left, settings) {
console.log('load');
console.log(elements_left);
//console.log(this, elements_left, settings);
}
*/
});
$('body').css('zoom', 'reset');
$(document).keydown(function (event) {
console.log(111111111)
alert(11111111111)

if ((event.ctrlKey === true || event.metaKey === true)
&& (event.which === 61 || event.which === 107
|| event.which === 173 || event.which === 109
|| event.which === 187 || event.which === 189))
{
event.preventDefault()
}
});
$(document).keyup(function (event) {
console.log(111111111)
alert(11111111111)

if ((event.ctrlKey === true || event.metaKey === true)
&& (event.which === 61 || event.which === 107
|| event.which === 173 || event.which === 109
|| event.which === 187 || event.which === 189))
{
event.preventDefault()
}
});

$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}

});

});
// document.addEventListener('DOMContentLoaded', function (event) {
// chrome 浏览器直接加上下面这个样式就行了，但是ff不识别
// document.body.style.zoom = 'reset';
// document.addEventListener('keydown', function (event) {
// if ((event.ctrlKey === true || event.metaKey === true)
// && (event.which === 61 || event.which === 107
// || event.which === 173 || event.which === 109
// || event.which === 187 || event.which === 189))
// {
// event.preventDefault();
// }
// }, false);
// document.addEventListener('mousewheel DOMMouseScroll', function (event) {
// if (event.ctrlKey === true || event.metaKey) {
// event.preventDefault();
// }
// }, false);
// }, false);

</script>
</body>
</html>

歚木xing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现懒加载

文章参考：http://code.ciaoca.com/jquery/lazyload/上实例代码：jQuery Lazy Load 图片延迟加载 » 使用淡入动画效果 » 在线演示 - 前端开发仓库 -->
复制链接

扫一扫