jQuery基础学习随笔 2023

jQuery多库共存

jQuery以 $ 作为标识符，其他JS库也会用 $ 作为标识符，为了避免冲突，可以采用一些措施。

            // 1. 如果$ 符号冲突，就使用 jQuery
            console.log( jQuery("div") );
                           // $("div")

            // 2. 让jQuery 释放对 $ 的控制权，自己可以自定义一个
            var zidingyi = jQuery.noConflict();
            console.log( zidingyi("div") );
                             // $("div")

 

jQuery 图片懒加载 延迟加载

同时加载太多会增加负载，可以使用 延迟加载。

EasyLazyload github: https://github.com/channg/EasyLazyload.js

将图片 src 替换为 data-lazy-src

    <div>
        <img data-lazy-src="images/bg/top_img01.jpg">
        <img data-lazy-src="images/bg/top_img02.jpg">
        <img data-lazy-src="images/bg/top_img03.jpg">
        <img data-lazy-src="images/bg/top_img04.jpg">
        <img data-lazy-src="images/bg/top_img05.jpg">
    </div>
    
    <script src="EasyLazyload.js"></script>     <!-- 此插件需要在dom下面引入 -->
    <script>
        lazyLoadInit({
        showTime:1100,
        onLoadBackEnd:function(i,e){
            console.log("onLoadBackEnd:"+i);
        }
        ,onLoadBackStart:function(i,e){
            console.log("onLoadBackStart:"+i);
        }
    });
    </script>