图片预加载
2019-08-07 本文已影响0人
小凡凡520
空链接
<body>
<button class="btn" value="11">btn1</button>
<button class="btn" value="22">btn2</button>
<!--空链接/自定义属性-->
<a href="javascript:;" data-control="test"></a>
this / 遍历数组
<script>
$(document).ready(function () {
$('.btn').on('click',function () {
console.log($(this).val());
})
var imgs = [
'test1',
'test2',
'test3'
];
$.each(imgs,function (i,src) {
console.log(i);
console.log(src);
});
});
</script>
定义变量
<script>
var i = 'test',
j = 'test'
</script>
文档点击事件
<script>
$(document).ready(function () {
$(document).on('click',function () {
console.log('clicked')
})
})
</script>
事件冒泡
<script>
$(document).ready(function () {
$(document).on('click',function () {
console.log('clicked');
});
$('#btn').on('click',function (e) {
// 事件冒泡
e.stopPropagation();
console.log('sssssssss');
})
})
</script>
自定义属性
<body>
<button data-control="test1" class="btn"></button>
<button data-control="test2" class="btn"></button>
</body>
<script>
$(document).ready(function () {
$('.btn').on('click',function () {
if ($(this).data('control') === 'test1'){
console.log('test1')
} else {
console.log('test2')
}
})
})
</script>
更改图片路径
<head>
<meta charset="UTF-8" content="text/html" http-equiv="content-type">
<title>demo</title>
<script src="myjs.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#id1').attr('src','https://img3.mukewang.com/59ed97230001b1e106000338-240-135.jpg')
})
</script>
</head>
<body>
<div>
<img id="id1" src="1.png">
</div>
</body>
</html>
图片下载
<head>
<meta charset="UTF-8" content="text/html" http-equiv="content-type">
<title>demo</title>
<script src="myjs.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var imgObj = new Image();
imgObj.src = 'https://img3.mukewang.com/59ed97230001b1e106000338-240-135.jpg';
$(imgObj).on('load',function () {
console.log('下载成功');
});
})
</script>
</head>
<body>
<div>
<img id="id1" src="1.png">
</div>
</body>
插件
(function ($) {
function Preload(imgs,options) {
this.imgs = imgs;
this.opts = options
}
$.extend({
preload:function (imgs, opts) {
new Preload(imgs,opts);
}
})
})(jQuery);
