js效果筆記：怎樣實現圖片的懶載入以及jquery.lazyload.js的使用

来源:http://www.cnblogs.com/moqiutao/archive/2017/06/07/6959163.html
-Advertisement-
Play Games

在項目中有時候會用到圖片的延遲載入，那麼延遲載入的好處是啥呢？ 我覺得主要包括兩點吧，第一是在包含很多大圖片長頁面中延遲載入圖片可以加快頁面載入速度；第二是幫助降低伺服器負擔。 下麵介紹一下常用的延遲載入插件jquery.lazyload.js以及怎樣實現一個延遲載入的插件。 一：jquery.la ...


在項目中有時候會用到圖片的延遲載入，那麼延遲載入的好處是啥呢？

我覺得主要包括兩點吧，第一是在包含很多大圖片長頁面中延遲載入圖片可以加快頁面載入速度；第二是幫助降低伺服器負擔。

下麵介紹一下常用的延遲載入插件jquery.lazyload.js以及怎樣實現一個延遲載入的插件。

一：jquery.lazyload.js插件

lazyload是jQuery寫的延遲載入插件，在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預載入的處理方式正好是相反的。

實現原理

首先選中的img元素都綁定了一個appear事件(處理img顯示真實的圖片地址)，方便以後滿足條件時觸發該事件；

在配置對象中有一個container屬性配置，預設為window，如果img元素在該container容器視口中，則觸發appear事件；

為了判斷img元素是否在container容器視口範圍中，有如下四個方法：

$.belowthefold = function(element, settings) {};    // 在視口下方
$.rightoffold = function(element, settings) {};        // 在視口右方
$.abovethetop = function(element, settings) {};        // 在視口上方
$.leftofbegin = function(element, settings) {};        // 在視口左方

具體使用

1.頁面引入方式

由於延遲載入lazyload是依賴jquery的，所有頁面需要引入jquery，如下：

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

基本寫法：

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

$(function() {
    $("img.lazy").lazyload();
});

其中的data-original 屬性存放真實的圖片url路徑。

小貼士：你必須設置圖片的寬度或者高度在css中，否則插件可能不能正常工作。

設置Threshold

預設情況下圖片會出現在屏幕時載入. 如果你想提前載入圖片, 可以設置 threshold 選項, 設置 threshold 為 200 令圖片在距離屏幕 200 像素時提前載入。

$("img.lazy").lazyload({
    threshold : 200
});

設置事件觸發載入

事件可以是任何 jQuery 事件, 如: click 和 mouseover. 你還可以使用自定義的事件, 如: sporty 和 foobar. 預設情況下處於等待狀態, 直到用戶滾動到視窗上圖片所在位置. 在灰色占點陣圖片被點擊之前阻止載入圖片, 你可以這樣做:

$("img.lazy").lazyload({
    event : "click"
});

當然，你也可以用下麵的這種方式實現延遲載入：

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});

$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

即是頁面載入完成 5 秒後,再去執行圖片的懶載入。

延遲載入效果

當圖片完全載入的時候, 插件預設地使用 show() 方法來將圖顯示出來. 其實你可以使用任何你想用的特效來處理. 下麵的代碼使用 FadeIn 效果：

$("img.lazy").lazyload({
    effect : "fadeIn"
});

不支持JavaScript的瀏覽器的使用方式

幾乎所有瀏覽器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客戶端展示真實圖片. 當瀏覽器不支持 JavaScript 時優雅降級, 你可以將真實的圖片片段在寫 <noscript> 標簽內。

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">
<noscript>
    <img src="img/example.jpg" width="640" heigh="480">
</noscript>

可以通過 CSS 隱藏占位符：

.lazy {
  display: none;
}

在支持 JavaScript 的瀏覽器中, 你必須在 DOM ready 時將占位符顯示出來, 這可以在插件初始化的同時完成。

$("img.lazy").show().lazyload();

設置延遲載入的圖片容器

你可以將插件用在可滾動容器的圖片上, 例如帶滾動條的 DIV 元素. 你要做的只是將容器定義為 jQuery 對象並作為參數傳到初始化方法裡面：

#container {
    height: 600px;
    overflow: scroll;
}

$("img.lazy").lazyload({
    container: $("#container")
});

當圖片不順序排列

滾動頁面的時候, Lazy Load 會迴圈為載入的圖片. 在迴圈中檢測圖片是否在可視區域內. 預設情況下在找到第一張不在可見區域的圖片時停止迴圈. 圖片被認為是流式分佈的, 圖片在頁面中的次序和 HTML 代碼中次序相同. 但是在一些佈局中, 這樣的假設是不成立的. 不過你可以通過 failurelimit 選項來控制載入行為。

$("img.lazy").lazyload({ 
    failure_limit : 10
});

將 failurelimit 設為 10 令插件找到 10 個不在可見區域的圖片是才停止搜索. 如果你有一個猥瑣的佈局, 請把這個參數設高一點。

設置載入隱藏的圖片

可能在你的頁面上埋藏可很多隱藏的圖片. 比如插件用在對列表的篩選, 你可以不斷地修改列表中各條目的顯示狀態. 為了提升性能, Lazy Load 預設忽略了隱藏圖片. 如果你想要載入隱藏圖片, 請將 skip_invisible 設為 false。

$("img.lazy").lazyload({
    skip_invisible : true
});

源碼

官網地址：http://appelsiini.net/projects/lazyload/

/*!
     * Lazy Load - jQuery plugin for lazy loading images
     *
     * Copyright (c) 2007-2015 Mika Tuupola
     *
     * Licensed under the MIT license:
     *   http://www.opensource.org/licenses/mit-license.php
     *
     * Project home:
     *   http://www.appelsiini.net/projects/lazyload
     *
     * Version:  1.9.7
     *
     */
    
    (function($, window, document, undefined) {
        var $window = $(window);
    
        $.fn.lazyload = function(options) {
            var elements = this;
            var $container;
            var settings = {
                threshold       : 0,
                failure_limit   : 0,
                event           : "scroll",
                effect          : "show",
                container       : window,
                data_attribute  : "original",
                skip_invisible  : false,
                appear          : null,
                load            : null,
                placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
            };
    
            function update() {
                var counter = 0;
    
                elements.each(function() {
                    var $this = $(this);
                    if (settings.skip_invisible && !$this.is(":visible")) {
                        return;
                    }
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $this.trigger("appear");
                            /* if we found an image we'll load, reset the counter */
                            counter = 0;
                    } else {
                        if (++counter > settings.failure_limit) {
                            return false;
                        }
                    }
                });
    
            }
    
            if(options) {
                /* Maintain BC for a couple of versions. */
                if (undefined !== options.failurelimit) {
                    options.failure_limit = options.failurelimit;
                    delete options.failurelimit;
                }
                if (undefined !== options.effectspeed) {
                    options.effect_speed = options.effectspeed;
                    delete options.effectspeed;
                }
    
                $.extend(settings, options);
            }
    
            /* Cache container as jQuery as object. */
            $container = (settings.container === undefined ||
                          settings.container === window) ? $window : $(settings.container);
    
            /* Fire one scroll event per scroll. Not one scroll event per image. */
            if (0 === settings.event.indexOf("scroll")) {
                $container.bind(settings.event, function() {
                    return update();
                });
            }
    
            this.each(function() {
                var self = this;
                var $self = $(self);
    
                self.loaded = false;
    
                /* If no src attribute given use data:uri. */
                if ($self.attr("src") === undefined || $self.attr("src") === false) {
                    if ($self.is("img")) {
                        $self.attr("src", settings.placeholder);
                    }
                }
    
                /* When appear is triggered load original image. */
                $self.one("appear", function() {
                    if (!this.loaded) {
                        if (settings.appear) {
                            var elements_left = elements.length;
                            settings.appear.call(self, elements_left, settings);
                        }
                        $("<img />")
                            .bind("load", function() {
    
                                var original = $self.attr("data-" + settings.data_attribute);
                                $self.hide();
                                if ($self.is("img")) {
                                    $self.attr("src", original);
                                } else {
                                    $self.css("background-image", "url('" + original + "')");
                                }
                                $self[settings.effect](settings.effect_speed);
    
                                self.loaded = true;
    
                                /* Remove image from array so it is not looped next time. */
                                var temp = $.grep(elements, function(element) {
                                    return !element.loaded;
                                });
                                elements = $(temp);
    
                                if (settings.load) {
                                    var elements_left = elements.length;
                                    settings.load.call(self, elements_left, settings);
                                }
                            })
                            .attr("src", $self.attr("data-" + settings.data_attribute));
                    }
                });
    
                /* When wanted event is triggered load original image */
                /* by triggering appear.                              */
                if (0 !== settings.event.indexOf("scroll")) {
                    $self.bind(settings.event, function() {
                        if (!self.loaded) {
                            $self.trigger("appear");
                        }
                    });
                }
            });
    
            /* Check if something appears when window is resized. */
            $window.bind("resize", function() {
                update();
            });
    
            /* With IOS5 force loading images when navigating with back button. */
            /* Non optimal workaround. */
            if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
                $window.bind("pageshow", function(event) {
                    if (event.originalEvent && event.originalEvent.persisted) {
                        elements.each(function() {
                            $(this).trigger("appear");
                        });
                    }
                });
            }
    
            /* Force initial check if images should appear. */
            $(document).ready(function() {
                update();
            });
    
            return this;
        };
    
        /* Convenience methods in jQuery namespace.           */
        /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
    
        $.belowthefold = function(element, settings) {
            var fold;
    
            if (settings.container === undefined || settings.container === window) {
                fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
            } else {
                fold = $(settings.container).offset().top + $(settings.container).height();
            }
    
            return fold <= $(element).offset().top - settings.threshold;
        };
    
        $.rightoffold = function(element, settings) {
            var fold;
    
            if (settings.container === undefined || settings.container === window) {
                fold = $window.width() + $window.scrollLeft();
            } else {
                fold = $(settings.container).offset().left + $(settings.container).width();
            }
    
            return fold <= $(element).offset().left - settings.threshold;
        };
    
        $.abovethetop = function(element, settings) {
            var fold;
    
            if (settings.container === undefined || settings.container === window) {
                fold = $window.scrollTop();
            } else {
                fold = $(settings.container).offset().top;
            }
    
            return fold >= $(element).offset().top + settings.threshold  + $(element).height();
        };
    
        $.leftofbegin = function(element, settings) {
            var fold;
    
            if (settings.container === undefined || settings.container === window) {
                fold = $window.scrollLeft();
            } else {
                fold = $(settings.container).offset().left;
            }
    
            return fold >= $(element).offset().left + settings.threshold + $(element).width();
        };
    
        $.inviewport = function(element, settings) {
             return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
                    !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
         };
    
        /* Custom selectors for your convenience.   */
        /* Use as $("img:below-the-fold").something() or */
        /* $("img").filter(":below-the-fold").something() which is faster */
    
        $.extend($.expr[":"], {
            "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
            "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
            "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
            "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
            "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
            /* Maintain BC for couple of versions. */
            "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
            "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
            "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
        });
    
    })(jQuery, window, document);

二：手寫一個簡單的懶載入插件

js代碼

window.smallDelay = (function(window, document, undefined) {
    'use strict';
    var store = [],poll;
    var settings = {
        offset:0, //離可視區域多少像素的圖片可以被載入
        throttle: 250 //圖片延時多少毫秒載入
    }
        
    var _inView = function(el) {
        var coords = el.getBoundingClientRect();
        return ((coords.top >= 0 && coords.left >= 0) && coords.top <= ((window.innerHeight || document.documentElement.clientHeight) + parseInt(settings.offset)));
    };

    var _pollImages = function() {
        for (var i = store.length; i--;) {
            var self = store[i];
            if (_inView(self)) {
                self.src = self.getAttribute('data-delay');
                store.splice(i, 1);
            }
        }
    };

    var _throttle = function() {
        clearTimeout(poll);
        poll = setTimeout(_pollImages, settings.throttle);
    };

    var init = function(obj) {
        var nodes = document.querySelectorAll('[data-delay]');
        var opts = obj || {};
        settings.offset = opts.offset || settings.offset;
        settings.throttle = opts.throttle || settings.throttle;

        for (var i = 0; i < nodes.length; i++) {
            store.push(nodes[i]);
        }

        _throttle();
        
        //滾動監聽執行圖片懶載入
        if (document.addEventListener) {
            window.addEventListener('scroll', _throttle, false);
        } else {
            window.attachEvent('onscroll', _throttle);
        }
        
        //返回該對象進行鏈式操作
        return this;
    };

    return {
        init: init,
        render: _throttle
    };

})(window, document);

調用方式：

smallDelay.init({
     offset: 0,//離可視區域多少像素的圖片可以被載入
　　 throttle: 0 //圖片延時多少毫秒載入
});

html代碼：

<img src="images/loading.gif" data-delay="images/avatar.png" />

三：根據lazyload插件實現一個不依賴jQuery的懶載入插件

實現內容

1、增加了圖片預載入可選

2、修改了圖片本身就在可視範圍的時候直接顯示而不需要滾動條觸發

3、修改了Splice刪除數組的時候，會跳過下一張圖片BUG

4、瀏覽器視窗resize的時候圖片出現也會載入

5、判斷圖片父層包裹頂部或者底部出現在可視範圍內即可顯示圖片

實現源碼

var Lazy = {
        $:function(arg,context){
            var tagAll,n,eles=[],i,sub = arg.substring(1);
            context = context|| document;
            if(typeof arg =='string'){
                switch(arg.charAt(0)){
                    case '#':
                        return document.getElementById(sub);
                        break;
                    case '.':
                        if(context.getElementsByClassName) return context.getElementsByClassName(sub);
                        tagAll = Lazy.$('*');
                        n = tagAll.length;
                        for(i = 0;i<n;i++){
                            if(tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                        }
                        return eles;
                        break;
                    default:
                        return context.getElementsByTagName(arg);
                        break;
                }
            }
        },
        getPos:function (node) {
            var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
                    scrollt = document.documentElement.scrollTop || document.body.scrollTop;
            var pos = node.getBoundingClientRect();
            return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
        },
        bind:function(node,type,handler){
            node.addEventListener?node.addEventListener(type, handler, false):node.attachEvent('on'+ type, handler);
        },
        unbind:function(node,type,handler){
            node.removeEventListener?node.removeEventListener(type, handler, false):node.detachEvent('on'+ type, handler);
        },
        toArray:function(eles){
            var arr = [];
            for(var i=0,n=eles.length;i<n;i++){
                arr.push(eles[i]);
            }
            return arr;
        }
    };
    function imgLazyLoad(){
        var timer,screenHeight = document.documentElement.clientHeight;
        // 選擇所有圖片
        var allimg = Lazy.$('img');
        // 篩選CLASS為lazyload的圖片
        var elems = Lazy.$('.lazyload',allimg);
        // 轉換為真正的數組
        elems = Lazy.toArray(elems);
        if(!elems.length) return;
        // 沒有發生滾動事件時如果圖片在可視範圍之內，也顯示
        for(var i = 0;i < elems.length;i++){
            // 獲取圖像的父元素即包裹圖像的元素，判斷圖像是否在可視區域即直接判斷父元素是否可視
            var parent = elems[i].parentNode;
            var pos = Lazy.getPos(parent);
            var posT = pos.top;
            var posB = pos.bottom;
            // 沒有滾動條情況如果距離頂部的距離小於屏幕的高度則賦值SRC
            if(posT < screenHeight){
                elems[i].src = elems[i].getAttribute('data-img');
                // 移除後，數組的長度減一，下一個下標需減一
                elems.splice(i--,1);
            }
        }
        // 綁定scroll事件
        Lazy.bind(window,'scroll',loading);
        Lazy.bind(window,'resize',loading);
        function loading(){
            timer && clearTimeout(timer);
            timer = setTimeout(function(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                screenHeight = document.documentElement.clientHeight;
                for(var i = 0;i < elems.length;i++){
                    var parent = elems[i].parentNode;
                    var pos = Lazy.getPos(parent);
                    var posT = pos.top;
                    var posB = pos.bottom;
                    var screenTop = screenHeight+scrollTop;
                    // 元素頂部出現在可視區  或者  元素底部出現在可視區
                    if((posT > scrollTop && posT <  screenTop) || (posB > scrollTop && posB < screenTop)){
                        elems[i].src = elems[i].getAttribute('data-img');
                        elems.splice(i--,1);
                    }else{
                        // 去掉以下註釋開啟圖片預載入
                        // new Image().src = elems[i].getAttribute('data-img');
                    }
                }
                if(!elems.length){
                    Lazy.unbind(window,'scroll',loading);
                    Lazy.unbind(window,'resize',loading);
                }
            },300);
        }
    }
    imgLazyLoad();

使用方法

1、在圖片上增加lazyload的類(class='lazyload')

2、把真實的圖片地址放入自定義屬性data-img 中，把圖片的SRC屬性設置為一個一像素的透明圖片，圖片需要設置width，height屬性，以免佈局混亂

如下：

<img data-img="a.jpg" src="loading.gif" width="640" height="480"   class='lazyload'>

3、在需要延遲載入的頁面調用imgLazyLoad()函數；

該原生js實現的懶載入轉載地址：http://www.cnblogs.com/NNUF/archive/2012/06/25/2561570.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery雜項方法
    [1]數據操作 [2]隊列操作 [3]集合操作 [4]索引過濾 [5]內容過濾 ...
  • webpack打包器簡單入門
    概念 webpack是一個現代javascript應用程式的模塊打包器。 當webpack處理你的應用程式時，它會遞歸構建一個依賴圖（包含了你的應用程式所需要每個模塊），然後把這些模塊打包到少數幾個budle文件中（通常是只有一個，會被瀏覽器載入，根據項目情況而定）。 這是令人難以置信的配置，但開始 ...
  • Node.js爬蟲-爬取慕課網課程信息
    第一次學習Node.js爬蟲，所以這時一個簡單的爬蟲，Node.js的好處就是可以併發的執行 這個爬蟲主要就是獲取慕課網的課程信息，並把獲得的信息存儲到一個文件中，其中要用到cheerio庫，它可以讓我們方便的操作HTML，就像是用jQ一樣 開始前，記得 為了能夠併發的進行爬取，用到了Promise ...
  • 你真的知道組件中的v-model嗎？
    v model的神奇 html js 一旦我們輸入的值發生變化,data中的poin值也會發生變化。 理論上data中的值發生變化是會出發事件的，但是我們沒看見？ 其實在vue的文檔中有說明: 是下麵的語法糖 每次我們輸入的時候觸發了 事件，input綁定了內聯函數,從而改變了 的值。 你好奇inp ...
  • CSS學習筆記03 CSS層疊性、繼承性、特殊性
    層疊性 所謂層疊性是指多種CSS樣式的疊加，也就是說後面設置的樣式會層疊（覆蓋）之前的樣式，層疊性的前提是CSS的選擇器的優先順序相同，例如，當使用內嵌式CSS樣式表定義<p>標記字型大小大小為12像素，鏈入式定義<p>標記顏色為紅色，那麼段落文本將顯示為12像素紅色，即這兩種樣式產生了疊加。 瀏覽器顯示 ...
  • 面向對象編程---圖片輪播
    今天複習了一下麵向對象編程，下麵是我的效果圖 看著這個圖片你會覺得這沒有什麼，那麼上代碼： html部分： 必要的css代碼 js部分： 輪播的js 希望能幫到大家，還有就是這個不是基於jQuery的，我自己封裝了一個簡單的方法。 以後我們圖片輪播可以使用 這樣使用於比較多的輪播組件的網站，當然我們 ...
  • ajax(Asynchronous JavaScript + XML) 技術學習
    參考文檔：https://developer.mozilla.org/en-US/docs/AJAX 本文進行了大致翻譯。 Ajax 本身本不是一門技術，而是在2005年由Jesse James Garrett首創的描述為一個“新”途徑來應用許多已存在的技術，包括：HTML 或者 XHTML, Ca ...
  • AngularJS 學習筆記--01
    學習 AngularJS 要先瞭解 MVC 模式 , 即 " 模型--視圖--控制器 " . 模型: 包含了需要用到的數據 ; 有兩種廣義上的模型 : 視圖模型 , 只表示從控制器傳往視圖的數據 ; 領域模型 , 包含了業務領域的數據 , 以及用於創建 , 存儲和操縱這些數據的各種操作 , 轉換和規... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類