我把MUI示例lazyload-image.html删除只剩img,,代码如下:
请问:
给图片设置了宽高,placeholder就会失效,而且图片加载时会出现灰色边框?如果删去img宽高样式就生效了,,奇怪
如何设置懒加载时图片截图中间显示,而不是拉伸铺满200x200px的正方形img?
如何设置懒加载失败后,设置另外一张默认图?
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type="text/css">
/*给图片设置了宽高,placeholder就会失效,而且图片加载时会出现灰色边框*/
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="mui-content">
<ul id="list"></ul>
</div>
</body>
<script src="../js/mui.min.js "></script>
<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js"></script>
<script>
mui.init();
var createFragment = function(count) {
var fragment = document.createDocumentFragment();
var li;
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.innerHTML = '<img data-lazyload="http://www.dcloud.io/hellomui/images/' + (i % 5 + 1) + '.jpg?version=' + Math.random() * 1000 + '">';
fragment.appendChild(li);
}
return fragment;
};
var list = document.getElementById("list");
list.appendChild(createFragment(50));
/*给图片设置了宽高,placeholder就会失效,而且图片加载时会出现灰色边框*/
mui(document).imageLazyload({
placeholder: '../images/60x60.gif'
});
</script>
</html>
