图片预加载

作者: 小凡凡520 | 来源:发表于2019-08-07 17:46 被阅读0次

js-事件委托&图片预加载
图片预加载
JS
图片懒加载
前端图片加载优化
【JS】图片预加载--无序加载网站loading
JavaScript--预加载与延迟加载
图片的预加载与懒加载
2018-07-27
图片预加载、瀑布流+图片预加载

空链接

<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);