关于使用jQuery的Lazyload插件时遇到的问题及解决方案
2017-06-30 本文已影响390人
无聊肥猫
jQuery的Lazyload插件，一个做前端开发经常会用到的插件，简单易用效果好，相信大家都不陌生。
最近项目中使用这个插件是遇到了一个问题，具体表现为页面加载完以后，本应该显示产品图片的地方显示的是默认占位图，需要滚动页面以后才会加载显示正确产品图片，简单代码如下：
<html>
<head>
<style type="text/css">
img {
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body style="text-align:center;">
<img data-original="img/banner_login.jpg" />
<img data-original="img/HBuilder.png" />
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.1.9.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').lazyload({
placeholder : "img/HBuilder.png",
effect : "fadeIn"
});
});
</script>
</body>
</html>
代码是没有问题的，独立运行的时候可以正常显示图片，但是放到项目具体的页面中时就出现了上述问题。
检查了很久还是没弄明白问题在哪里，于是想了一个投机取巧的办法，解决了这个问题。
这个投机的办法是利用了Lazyload插件需要滚动才触发加载图片的特性，在页面加载完毕后，自动滚动1个单位，即可达到触发的目的。
具体为在页面添加如下代码：
$(document).ready(function(){
$('body,html').animate({scrollTop:1},1);
});
代码中第一个1表示滚动的单位数量，为了让用户感受不到页面进行了滚动操作，设置为1比较妥当。
第二个1表示动画的时长，单位为毫秒，目的跟上面一样，1毫秒对于用户来说是很难察觉得到的。
以上就是该问题的解决方案。
