تحميل لوحة العرض المطلوبة باستخدام jQuery (تحسين أداء frontend)

المقدمة

عن العرض التلقائي للشرائح،أعتقد أن الجميع يعرف،خاصة تلك التي تعتمد على jQuery،ويمكن العثور على الكثير من الإضافات والشيفرة عبر الإنترنت،لكن هناك القليل جدًا منهم الذين يتوافقون مع متطلباتك الخاصة،لذا سأعمل على إنشاء عرض تلقائي للشرائح jQuery يتوافق مع متطلباتي الخاصة ويستطيع أن يتحمل اختبار الإنترنتيين العاديين!

التفكير

لماذا يقال أن بعض العروض التلقائية الأخرى عبر الإنترنت لا تتوافق مع متطلباتي؟ما هي متطلباتي؟

معظم طرق تصميم العرض التلقائي للصور العرضية التي يمكن العثور عليها عبر الإنترنت هي،أولاً،كتابة HTML للصور والروابط،ثم التحكم في التخفيض والعرض لعرض الصور العرضية الحالية.

عادة ما نضع العرض التلقائي في الصفحة الرئيسية للعرض،لكن يجب أن يكون المحتوى الرئيسي للصفحة الرئيسية هو المقالات التي تم تحديثها مؤخرًا،على الأقل لا أعتقد أن وظيفة عرض الصور يجب أن يتم تضمينها في نتائج البحث،لذلك،الطلب الثاني الخاص بي هو أن يكون متوافقًا مع SEO.

التحقيق

للإجابة على الطلبين المذكورين أعلاه،قمت بإنشاء DEMO،لنلقي نظرة على شيفرة المصدرية للDEMO،هل لاحظتم الفرق؟نعم،في شيفرة المصدرية HTML للDEMO،لا ترون أي صور أو معلومات ذات صلة،كل شيء يتم تحميله بواسطة JS،أي أن لا يمكن للرؤوس الآلية الوصول إليها،و يُحمّل الصور بشكل فردي مع تغيير الصور.

هنا سأشارككم فقط طريقتي في كتابة JS،و HTML يرجى أن تنظر إلى الشيفرة المصدرية للجميع،أنا لن أشرح الشيفرة بشكل تفصيلي،و التعليقات مكتوبة بوضوح.

$(function() {
  var WangeSlide = (function() {
    //配置
    var config = {
      //轮播图尺寸
      width : 960 ,
      height : 350 ,
      //هل التبديل التلقائي
      autoSwitch : true,
      //زمن التبديل التلقائي (بالميليسيوندات)
      interval : 6000,
      //مسار صور العرض التلقائي
      picPath : 'http://www.dowebok.com/demo/2014/93/img/',
      //البيانات الخاصة بالصور في العرض التلقائي: اسم ملف الصورة / عنوان الصورة / رابط الصورة
      picInfo : [
        ['fullimage1.jpg', 'صورة3','http://codepen.io/webstermobile/'],
        ['fullimage1.jpg', 'صورة2','http://codepen.io/webstermobile/'],
        ['fullimage1.jpg', 'صورة1','http://codepen.io/webstermobile/']
      ]
    };
    //获取图片信息
    */
     * @param index 图片在的索引值
    /*/
    var getImgInfo = function(index) {
      var imgSrc = config.picPath + config.picInfo[index][0],
        imgAlt = config.picInfo[index][3],
        imgUrl = config.picInfo[index][4],
        imgId = 'slide_' + (index+1).toString(),
        imgHtml = '<li id="' + imgId + '">' +
              '  <a href="' + imgUrl +'" rel="external nofollow" title="[#0#]" class="pic">' +
              '    <img src="' + imgSrc + '" alt="[#0#]" class="slide_thumb" />' +
              '  </a>' +
            '</li>',
        slideTextHtml = '<a href="' + imgUrl + '" rel="external nofollow"  title="[#0#]">' + imgAlt+ '</a>';
      return {
        imgAlt : imgAlt,,
        imgUrl : imgUrl,,
        imgHtml : imgHtml,,
        slideTextHtml : slideTextHtml
      }
    };
    //图片完全加载后混混加载显示
    var fadeInImg = function(el, speed) {
      //console.log(el);
      el.find("img").load(function() {
        el.find("img").addClass("loaded");
        el.fadeIn(speed);
      });
    };
    //图片切换
    */
     * @param index 图片在的索引值
     * @param triggerCurEl 当前解名节点元素
    /*/
    var imgSwitch = function(index, triggerCurEl) {
      var slideId = 'slide_' + (index+1).toString(),
        slideIdEl = document.getElementById('$slideId');
      if ($slideIdEl) {
        //如果已有对应的元素，则显示已有元素
        var panelLi = ('$panel ul li');
        panelLi.hide();
        ('$slideIdEl').fadeIn('slow');
      } else {
        //如果还没有对应的元素，则注入元素
        ($(getImgInfo(index).imgHtml)).appendTo('$panel ul');
        var panelLi = ('$panel ul li');
        panelLi.hide();
        //تحميل الصورة المرئية
        fadeInImg($("#$slideId"), 'slow');
      }
      //الحصول على نص alt كـ معلومات العرض
      ('$slide_text').html(getImgInfo(index).slideTextHtml);
      //الحالة الحالية cur
      ('$trigger ul li').removeClass('cur');
      triggerCurEl.addClass('cur');
    };
    //转播图
    var slide = function() {
      //设置转播图尺寸
      ('$panel').css({
        'width' : config.width + 'px',
        'height' : config.height + 'px'
      });
      var result = getImgInfo(0).imgHtml
      //初开化转播图、只加载第一张图片信息
      ($('#panel ul').html($(result)));
      //تحميل الصورة المرئية
      fadeInImg($('#slide_1'), 500);
      //إدراج طبقة الخلفية + وعنصر التفعيل + وعنصر نص الصور
      var slideBg = '<div id="slide_bg"></div>',
        trigger = '<div id="trigger"></div>',
        slideText = '<div id="slide_text"></div>';
      $('#panel').after(slideBg + trigger + slideText);
      //الحصول على نص alt كـ معلومات العرض
      $('#slide_text').html(getImgInfo(0).slideTextHtml);
      //إدراج نقطة التفعيل
      var triggerUl = $('<ul></ul>');
      triggerUl.appendTo($('#trigger'));
      لـ (var i=0, j=config.picInfo; i<j.length; i++) {
        $('<li>' + (i+1).toString() +'</li>').appendTo(triggerUl);
      }
      //الحالة الحالية cur
      $('#trigger ul li').eq(0).addClass('cur');
      //نقطة التفعيل
      $("#trigger ul li").click(function(){
        var index = $("#trigger ul li").index($(this))
        //console.log(index)
        imgSwitch(index,$(this))
      )
      //إيقاف التبديل عند وضع المؤشر
      var goSwitch = true;
      $('#panel').hover(
        function() {goSwitch = false},
        function() {goSwitch = true}
      );
      //التبديل التلقائي
      إذا (config.autoSwitch) {
        setInterval(function() {
          إذا (goSwitch) {
            //تحديد قيمة المكان الحالي لـ cur
            تعريف الـ index = parseInt($('.cur','#trigger').text()) - 1;
            إذا (index > (config.picInfo.length-2)) {}}
              index = -1;
            }
            imgSwitch((index+1), $('#trigger ul li:eq(' + (index+1) + ')'));
          }
        }, config.interval);
      }
    };
    return {
      // التحميل الأولي
      init : function() {
        slide();
      }
    }
  })();
  WangeSlide.init();
)

حالة الطلب الشبكي المطلوبة

　

من الصورة يمكن رؤية أن الصفحة يتم تحميلها وتغيير العرض تلقائيًا أو عند الضغط على التغيير قبل ذلك يتم تحميل صورة واحدة فقط من slide، مما يوفر كمية تحميل الصفحة بشكل كبير.

ميزات

نفس التأثير، ولكن طريقة التنفيذ مختلفة؟ هل سيكون هذا أمرًا مزعجًا؟ ما هي ميزاته؟

لنأخذ مثالًا، قبل التحسين، لنفترض أن الصور المتغيرة في الصفحة الرئيسية هي 5 صور، بمعدل 20K لكل صورة، مما يعني أن الصفحة الرئيسية يجب أن تحمل على الأقل 100K من الصور، هل يمكنك التأكد من أن كل مستخدم سيرى هذه 100K من الصور؟ إذا لم يرها المستخدم، فهل لا تُعد هدر السرعة في التحميل البالغة 100K؟

بعد التحقق، عند تحميل الصفحة الرئيسية لأول مرة، يكفي تحميل صورة بحجم حوالي 1K، حتى تُكون غير ضرورية، وسيتم تحميل الصورة التالية عند الضغط على الزر التالي أو عند وصول الوقت المحدد للجهاز، مما يوفر وقت التحميل بشكل كبير. 1K؟100K؟ أنت تعرف.

بالإضافة إلى ذلك، هناك ميزة أخرى باستخدام JS لتحميل الصور المطلوبة، وهي أن تحميل صورة بحجم 100K في متصفحات الهاتف الذكي التي لا تدعم JS، يمكن أن يكون ضغطًا كبيرًا على عرض العرض المتغير غير القابل للتغيير، وهو أيضًا يمكن أن يقلل بشكل كبير من تجربة المستخدم.