解析javascript图片懒加载与预加载的分析总结

Questo articolo introduce principalmente l'analisi delle due tecnologie di pre-caricamento e pre-caricamento, senza molte parole inutili, vediamo insieme.

Il pre-caricamento è anche chiamato pre-caricamento:L'articolo precedente ha introdotto: JS pre-caricamento delle immagini, pre-caricare immagini o caricare immagini in base a determinate condizioni.

Pre-caricamento:Pre-caricare le immagini, quando l'utente ha bisogno di visualizzarle, possono essere direttamente renderizzate dal cache locale.

L'essenza delle due tecnologie:I loro comportamenti sono opposti, uno è il pre-caricamento anticipato, l'altro è il ritardo o persino il non caricamento. Il pre-caricamento può alleviare la pressione sul latofrontend del server, mentre il pre-caricamento aumenterà la pressione sul latofrontend del server.

Il significato e i modi di implementazione del pre-caricamento sono:

Significato: L'obiettivo principale del pre-caricamento è l'ottimizzazione del lato前端 del server, ridurre il numero di richieste o ritardare il numero di richieste.

Modi di implementazione:

1. Il primo è il pre-caricamento puro, che utilizza setTimeOut o setInterval per ritardare il caricamento.

2. Il secondo è il pre-caricamento condizionale, che inizia a scaricare asincronamente solo quando si verificano determinate condizioni o si scatenano determinati eventi.

3. Il terzo è il pre-caricamento visivo, che significa caricare solo l'area visibile all'utente, che è principalmente realizzato attraverso la monitoraggio della barra di scorrimento. Di solito inizia a caricare a una certa distanza prima che l'utente veda l'immagine, in modo che l'utente possa vedere l'immagine esattamente quando la trascina.

Il significato e i modi di implementazione del pre-caricamento sono:

Il pre-caricamento può essere considerato come un sacrificio delle prestazioni del lato前端 del server, in cambio di una migliore esperienza utente, in modo che le operazioni dell'utente possano ricevere la più veloce risposta. Ci sono molti modi per implementare il pre-caricamento, come CSS(background), JS(Image) e HTML(<img />). Il più comune è new Image();, impostare il suo src per realizzare il pre-caricamento e utilizzare il metodo onload per richiamare l'evento di completamento del pre-caricamento. Appena il browser scarica l'immagine locale, lo stesso src verrà utilizzato per la cache, che è il metodo più semplice e più pratico di pre-caricamento. Quando l'Image scarica l'intestazione dell'immagine, ottiene larghezza e altezza, quindi può ottenere le dimensioni dell'immagine prima del pre-caricamento (il metodo è utilizzare un timer per ciclare le variazioni di larghezza e altezza).

Come possiamo implementare il preload?

Possiamo cercare su Google: possiamo vedere che molte persone utilizzano questo metodo per il preload: il codice è il seguente:

 function loadImage(url,callback) {
  var img = new Image();
  img.src = url;
  img.onload = function() {
    img.onload = null;
    callback.call(img);
  }
}

Perché altri browser funzionano correttamente: il motivo è molto semplice, è che i browser hanno caching, eccetto IE6 (cioè opera anche, ma ho provato specificamente con opera, non c'è, potrebbe essere un problema di versione, forse è già stato risolto). Gli altri browser eseguono nuovamente il metodo onload quando si fa clic di nuovo, ma IE6 carica direttamente dal browser.

Allora cosa faremo ora? Il migliore scenario è che l'Image abbia un valore di stato che indichi se è stato caricato con successo. Quando si carica dal cache, poiché non è necessario aspettare, questo valore di stato indica direttamente che è stato scaricato, mentre quando si carica tramite richiesta HTTP, poiché è necessario aspettare il download, questo valore viene visualizzato come non completato. In questo modo, possiamo risolvere il problema. Dopo una ricerca su Google, ho scoperto che c'è un'attributo di Image compatibile con tutti i browser - complete. Quindi, prima dell'evento onload dell'immagine, è sufficiente fare una verifica su questo valore. Infine, il codice diventa come segue:

function loadImage(url,callback) {
  var img = new Image();
  img.src = url;
  if(img.complete) { // Se l'immagine esiste già nel cache del browser, chiamare direttamente la funzione di callback
    callback.call(img);
    return; // Torna direttamente, non è necessario trattare ulteriormente l'evento onload
  }
  img.onload = function() {
    img.onload = null;
    callback.call(img);
  }
}

Questo significa che se l'immagine è già nel cache del browser, possiamo eseguire direttamente la funzione di img.complete dal cache del browser e poi tornare indietro.

Ma possiamo vedere il codice sopra: è necessario aspettare che l'immagine sia completamente caricata prima di eseguire la funzione di callback, o possiamo dire che dopo che l'immagine è stata caricata, possiamo ottenere la larghezza e l'altezza dell'immagine. Allora cosa faremo se vogliamo ottenere le dimensioni dell'immagine in anticipo? L'esperienza di navigazione su internet mi dice: quando il browser carica un'immagine, vediamo che l'immagine occupa un'area inizialmente e poi si carica gradualmente fino a completamento, e non è necessario impostare le proprietà width e height, perché il browser può ottenere i dati di intestazione dell'immagine. Sulla base di questo, è sufficiente utilizzarejavascript per monitorare lo stato delle dimensioni dell'immagine in tempo reale per sapere quando le dimensioni dell'immagine sono pronte. Il codice è il seguente: (ma c'è un presupposto: questo metodo non è il mio, né è il codice che ho scritto, è il codice che un amico di Internet ha riassunto; so solo che c'è questo principio)

var imgReady = (function(){
  var list = [],
    intervalId = null;
  // Utilizzato per eseguire la coda
  var queue = function(){
    for(var i = 0; i < list.length; i++){
      list[i].end ? list.splice(i--,1) : list[i]();
    }
    !list.length && stop();
  };
  // Ferma tutte le code di timer
  var stop = function(){
    clearInterval(intervalId);
    intervalId = null;
  }
  return function(url, ready, error) {
    var onready = {}, 
      width, 
      height, 
      newWidth, 
      newHeight,
      img = new Image();
    img.src = url;
    // Se l'immagine è stata cacheata, restituisce direttamente i dati della cache
    if(img.complete) {
      ready.call(img);
      return;
    }
    width = img.width;
    height = img.height;
    // Evento successivo al caricamento dell'immagine con errore 
    img.onerror = function () {
      error && error.call(img);
      onready.end = true;
      img = img.onload = img.onerror = null;
    };
    // Dimensioni dell'immagine pronte
    var onready = function() {
      newWidth = img.width;
      newHeight = img.height;
      if (newWidth !== width || newHeight !== height ||
        // Se l'immagine è già stata caricata altrove, utilizzare il rilevamento dell'area
        newWidth * newHeight > 1024
      ) {
        ready.call(img);
        onready.end = true;
      };
    };
    onready();
    // E'evento di caricamento completo
    img.onload = function () {
      // onload在定时器时间差范围内可能比onready快
      // 这里进行检查并确保onready优先执行
      !onready.end && onready();
      // IE gif动画会循环执行onload，置空onload即可
      img = img.onload = img.onerror = null;
    };
    // 加入队列中定期执行
    if (!onready.end) {
      list.push(onready);
      // 在任何时候只允许有一个定时器出现，以减少浏览器的性能损耗
      if (intervalId === null) {
        intervalId = setInterval(queue, 40);
      };
    };
  }
})();

调用方式如下：

imgReady('http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg',function(){
　　alert('larghezza:' + this.width + 'altezza:' + this.height);
});

以上就是本文的全部内容，希望本文所述对你有所帮助，希望大家继续关注我们的网站！想要学习jsp可以继续关注本站。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。