Καθυστέρηση κατά τη φόρτωση εικόνων και JavaScript στο SharePoint Online

Αυτό το άρθρο περιγράφει πώς μπορείτε να μειώσετε το χρόνο φόρτωσης σελίδων του SharePoint Online με χρήση JavaScript για να καθυστερήσετε τη φόρτωση εικόνων και με αναμονή για τη φόρτωση μη απαραίτητης JavaScript μετά τη φόρτωση της σελίδας.

Οι εικόνες μπορούν να επηρεάσουν αρνητικά τις ταχύτητες φόρτωσης σελίδας στο SharePoint Online. Από προεπιλογή, τα περισσότερα σύγχρονα προγράμματα περιήγησης στο Internet προ-φορτώνουν εικόνες κατά τη φόρτωση σε μια σελίδα HTML. Αυτό μπορεί να προκαλέσει την υπερβολικά αργή φόρτωση της σελίδας εάν οι εικόνες δεν είναι ορατές στην οθόνη, μέχρι ο χρήστης να κάνει κύλιση προς τα κάτω. Οι εικόνες μπορεί να αποκλείσουν τη φόρτωση του ορατού τμήματος της σελίδας από το πρόγραμμα περιήγησης. Για να επιλύσετε αυτό το πρόβλημα, μπορείτε να χρησιμοποιήσετε τη JavaScript για την παράλειψη της φόρτωσης των εικόνων στην αρχή. Επίσης, η φόρτωση μη απαραίτητης JavaScript μπορεί να επιβραδύνει τους χρόνους φόρτωσης στις σελίδες του SharePoint. Αυτό το θέμα περιγράφει ορισμένες μεθόδους που μπορείτε να χρησιμοποιήσετε για να βελτιώσετε τους χρόνους φόρτωσης των σελίδων με τη JavaScript στο SharePoint Online.

Βελτίωση των χρόνων φόρτωσης σελίδων μέσω της καθυστέρησης φόρτωσης εικόνων σε σελίδες του SharePoint Online με χρήση JavaScript

Μπορείτε να χρησιμοποιήσετε JavaScript για να αποτρέψετε την προ-φόρτωση εικόνων σε ένα πρόγραμμα περιήγησης στο web. Αυτό επιταχύνει τη συνολική απόδοση του εγγράφου. Για να το κάνετε αυτό, καταργήστε την τιμή του χαρακτηριστικού src από την ετικέτα <img> και αντικαταστήστε την με τη διαδρομή προς ένα αρχείο σε ένα χαρακτηριστικό δεδομένων όπως: data-src. Για παράδειγμα:

<img src=”” data-src=”/sites/NavigationBySearch/_catalogs/masterpage/Images/microsoft-white-8.jpg” />

Χρησιμοποιώντας αυτή τη μέθοδο, το πρόγραμμα περιήγησης δεν κάνει λήψη των εικόνων αμέσως. Εάν η εικόνα είναι ήδη στην οπτική γωνία, η JavaScript ενημερώνει το πρόγραμμα περιήγησης για να ανακτήσει τη διεύθυνση URL από το χαρακτηριστικό δεδομένων και να την εισαγάγει ως την τιμή για το χαρακτηριστικό src. Η εικόνα φορτώνεται μόνο καθώς ο χρήστης κάνει κύλιση και εμφανίζεται στην οθόνη.

Για να συμβεί αυτό, θα πρέπει να χρησιμοποιήσετε τη JavaScript.

Σε ένα αρχείο κειμένου, ορίστε τη συνάρτηση isElementInViewport()    για να ελέγξετε εάν ένα στοιχείο βρίσκεται ή όχι στο τμήμα του προγράμματος περιήγησης που είναι ορατό στο χρήστη.

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
  );
}

Στη συνέχεια, χρησιμοποιήστε το στοιχείο isElementInViewport()    στη συνάρτηση loadItemsInView()   . Η συνάρτηση loadItemsInView()    θα φορτώσει όλες τις εικόνες που έχουν μια τιμή για το χαρακτηριστικό src δεδομένων εφόσον βρίσκονται στο τμήμα του προγράμματος περιήγησης που είναι ορατό στο χρήστη. Προσθέστε την ακόλουθη συνάρτηση στο αρχείο κειμένου:

function loadItemsInView() {
  //Select elements by the row id.
  $("#row [data-src]").each(function () {
      var isVisible = isElementInViewport(this);
      if (isVisible) {
          if ($(this).attr("src") == undefined) {
              $(this).attr("src", $(this).data("src"));
          }
      }
  });
}

Τέλος, καλέστε το loadItemsInView()    μέσα από το window.onscroll()    όπως φαίνεται στο παρακάτω παράδειγμα. Αυτό εξασφαλίζει ότι τυχόν εικόνες που βρίσκονται στην οπτική γωνία φορτώνονται όταν ο χρήστης τις χρειάζεται, αλλά όχι πιο πριν. Προσθέστε τα ακόλουθα στο αρχείο κειμένου:

//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
    loadItemsInView();
});

Για SharePoint Online, πρέπει να επισυνάψετε την ακόλουθη συνάρτηση στο συμβάν κύλισης στην ετικέτα </div> του χώρου εργασίας #s4. Αυτό συμβαίνει επειδή τα συμβάντα παραθύρου αντικαθίστανται προκειμένου να διασφαλιστεί ότι η κορδέλα παραμένει προσαρτημένη στο επάνω μέρος της σελίδας.

//Keep the ribbon at the top of the page
$('#s4-workspace').on("scroll", function () {
    loadItemsInView();
});

Αποθηκεύστε το αρχείο κειμένου ως αρχείο JavaScript με την επέκταση .js, για παράδειγμα delayLoadImages.js.

Όταν ολοκληρώσετε τη σύνταξη του delayLoadImages.js, μπορείτε να προσθέσετε τα περιεχόμενα του αρχείου σε μια κύρια σελίδα του SharePoint Online. Αυτό μπορείτε να το κάνετε προσθέτοντας μια σύνδεση δέσμης ενεργειών στην κεφαλίδα της κύριας σελίδας. Όταν είστε σε μια κύρια σελίδα, η JavaScript θα εφαρμοστεί σε όλες τις σελίδες της τοποθεσίας σας SharePoint Online που χρησιμοποιεί αυτή τη διάταξη κύριας σελίδας. Εναλλακτικά, εάν σκοπεύετε να χρησιμοποιήσετε αυτή τη μέθοδο σε μία μόνο σελίδα της τοποθεσίας σας, χρησιμοποιήστε το πρόγραμμα επεξεργασίας δέσμης ενεργειών Τμήματος Web για να ενσωματώσετε την JavaScript σε αυτή τη σελίδα. Δείτε αυτά τα θέματα για περισσότερες πληροφορίες:

Παράδειγμα: Παραπομπή στο JavaScript αρχείο delayLoadImages.js από μια κύρια σελίδα στοSharePoint Online   

Προκειμένου να γίνει αυτό, πρέπει επίσης να αναφέρετε το jQuery στην κύρια σελίδα. Στο παρακάτω παράδειγμα, μπορείτε να δείτε στη φόρτωση της αρχικής σελίδας ότι έχει φορτωθεί μόνο μία εικόνα, αλλά υπάρχουν πολλές περισσότερες στη σελίδα.

Στιγμιότυπο οθόνης που εμφανίζει μία εικόνα φορτωμένη στη σελίδα

Το παρακάτω στιγμιότυπο οθόνης εμφανίζει τις υπόλοιπες εικόνες που λαμβάνονται μετά τη μετακίνησή τους με κύλιση στην προβολή.

Στιγμιότυπο οθόνης που εμφανίζει πολλές εικόνες που έχουν φορτωθεί στη σελίδα

Η καθυστέρηση φόρτωσης εικόνων με χρήση JavaScript μπορεί να είναι μια αποτελεσματική τεχνική όσον αφορά την αύξηση των επιδόσεων, ωστόσο, εάν η τεχνική έχει εφαρμοστεί σε μια δημόσια τοποθεσία Web, τότε, οι μηχανές αναζήτησης δεν έχουν τη δυνατότητα να ανιχνεύσουν τις εικόνες με τον ίδιο τρόπο που θα ανιχνεύατε μια τακτικά μορφοποιημένη εικόνα. Αυτό μπορεί να επηρεάσει τις προτεραιότητες στις μηχανές αναζήτησης, επειδή τα μετα-δεδομένα στην ίδια την εικόνα δεν είναι πραγματικά εκεί μέχρι τη φόρτωση της σελίδας. Τα προγράμματα ανίχνευσης των μηχανών αναζήτησης διαβάζουν μόνο τον κώδικα HTML και, επομένως, δεν βλέπουν τις εικόνες ως περιεχόμενο στη σελίδα. Οι εικόνες είναι ένας από τους παράγοντες που χρησιμοποιούνται για την κατάταξη των σελίδων στα αποτελέσματα αναζήτησης. Ένας τρόπος για να επιλύσετε αυτό το πρόβλημα είναι να χρησιμοποιήσετε εισαγωγικό κείμενο για τις εικόνες σας.

Δείγμα κώδικα GitHub: Εισαγωγή JavaScript για βελτίωση των επιδόσεων

Μην χάσετε το άρθρο και το δείγμα άρθρου και κώδικα στην εισαγωγή JavaScript που παρέχεται στο GitHub.

Δείτε επίσης

Υποστηριζόμενα προγράμματα περιήγησης στο Office 2013 και το Office 365 ProPlus

Διαδικασία: Εφαρμογή μιας κύριας σελίδας σε μια τοποθεσία στο SharePoint 2013

Διαδικασία: Δημιουργία μιας διάταξης σελίδας στο SharePoint 2013

Αναπτύξτε τις δεξιότητές σας
Εξερευνήστε το περιεχόμενο της εκπαίδευσης
Αποκτήστε πρώτοι τις νέες δυνατότητες
Γίνετε μέλος του Office Insider

Σας βοήθησαν αυτές οι πληροφορίες;

Σας ευχαριστούμε για τα σχόλιά σας!

Σας ευχαριστούμε για τα σχόλιά σας! Φαίνεται ότι μπορεί να είναι χρήσιμο να συνδεθείτε με έναν από τους συνεργάτες υποστήριξης του Office.

×