網頁懶加載js,html懶加載

本文目錄一覽：

• 1、圖片懶加載和預加載
• 2、網頁加載很慢JS或jquery堵塞，導致很久才彈出窗口
• 3、Vue.js中能使用vue-router + webpack 實現懶加載嗎
• 4、網頁打開很慢，加載js和css狀態是304 Not Modified，高手們，要怎麼解決？
• 5、圖片懶加載實現原理？
• 6、求一段點擊左右滾動，支持懶加載的js代碼

圖片懶加載和預加載

懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式 。用戶滾動到它們之前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載將使網頁加載更快。在某些情況下，它還可以幫助減少服務器負載。常適用圖片很多，頁面很長的電商網站場景中。

首先將頁面上的圖片的 src 屬性設為空字符串，而圖片的真實路徑則設置在data-original屬性中， 當頁面滾動的時候需要去監聽scroll事件，在scroll事件的回調中，判斷我們的懶加載的圖片是否進入可視區域,如果圖片在可視區內將圖片的 src 屬性設置為data-original 的值，這樣就可以實現延遲加載。

資源預加載是另一個性能優化技術，我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到。 預加載簡單來說就是將所有所需的資源提前請求加載到本地，這樣後面在需要用到時就直接從緩存取資源 。

在網頁全部加載之前，對一些主要內容進行加載，以提供給用戶更好的體驗，減少等待的時間。否則，如果一個頁面的內容過於龐大，沒有使用預加載技術的頁面就會長時間的展現為一片空白，直到所有內容加載完畢。

img src=” 0044449030002.jpg” style=”display:none”/

script src=”./myPreload.js”/script

PreloadJS提供了一種預加載內容的一致方式，以便在HTML應用程序中使用。預加載可以使用HTML標籤以及XHR來完成。默認情況下，PreloadJS會嘗試使用XHR加載內容，因為它提供了對進度和完成事件的更好支持，但是由於跨域問題，使用基於標記的加載可能更好。

兩者都是提高頁面性能有效的辦法， 兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力

轉：

網頁加載很慢JS或jquery堵塞，導致很久才彈出窗口

填寫完應該是你表單文件的問題。檢查/Search/index.asp 這個文件。

這個可能是你服務器ASP文件問題或者服務器IIS的問題，ASP文件運行慢。

Vue.js中能使用vue-router + webpack 實現懶加載嗎

可以，vue中提供了路由懶加載的方法，

const Proofread = (resolve) = {

import(‘components/proofread/proofread’).then((module) = {

resolve(module)

})

}

Proofread 為組件名

‘components/proofread/proofread’為路徑

這些代碼相當於普通加載的

impor Proofread from ‘components/proofread/proofread’

網頁打開很慢，加載js和css狀態是304 Not Modified，高手們，要怎麼解決？

304是使用緩存，不影響網頁，查服務器。

第一步、先確認網絡是否丟包，ping命令檢測。

第二步、檢測操作系統資源使用情況（http服務與數據庫）。

第三步、確認http服務是否hang死了，http緩存用滿的時候會這樣。

第四步、查數據庫鏈接是否正常。

第五步、檢查數據庫的慢查詢語句。

第五、以上步驟都沒問題，查程序bug去。

ps：如果使用的mysql，我建議評估業務量，重新調整數據庫使用的內存，別使用默認配置。

圖片懶加載實現原理？

圖片懶加原理

圖片懶加載的原理很簡單，就是我們先設置圖片的data-set屬性(當然也可以是其他任意的，只要不會發送http請求就行了，作用就是為了存取值)值為其圖片路徑，由於不是src，所以不會發送http請求。 然後我們計算出頁面scrollTop的高度和瀏覽器的高度之和，如果圖片舉例頁面頂端的坐標Y(相對於整個頁面，而不是瀏覽器窗口)小於前兩者之和，就說明圖片就要顯示出來了(合適的時機，當然也可以是 其他情況)，這時候我們再將 data-set屬性替換為src屬性即可。

圖片懶加載實現步驟：

1. 在main.js中導入Vant中的Lazyload指令並註冊：

import Vue from ‘vue’import { Lazyload } from ‘vant’ // 導入懶加載模塊LazyloadVue.use(Lazyload) // 註冊懶加載指令

2. 為van-image設置lazy-load指令屬性

!– lazy-load設置圖片懶加載，是一個自定義指令 –van-image width=”90″ height=”90″ :src=”item2″ lazy-load/

求一段點擊左右滾動，支持懶加載的js代碼

html

head

style

.right_Frame .ProductSlide{width:792px; height:auto; border:solid 1px #e0e0e0; color:#666;}

.Slide_Screen{ width:790px; height:502px; }

.Slide_Screenp{width:790px; height:502px; }

.Slide_List{width:785px; height:110px; margin:10px 0; padding-left:7px;}

.Slide_List a{ float:left; margin-top:10px; border: 0;}

.Slide_List ul li{width:139px; height:107px; float:left; margin:0 auto;}

.Slide_List ul li a{width:139px; text-align:center; margin-top:10px;}

a {color:#666; text-decoration:none;font-size: 10pt;}

img {border: 0;}

/style

/head

body

div class=”Slide_Screen”

div class=”right_Frame”

div class=”ProductSlide”

div class=”Slide_Screen”

img id=”bigImg” src=”” /

/div

div class=”Slide_List”

a href=”javaScript:changePage(-1);” titlr=”向左”img src=”” alt=”向左”//a

ul id=”smallImgList”/ul

a href=”javaScript:changePage(1)” titlr=”向右”img src=”” alt=”向右”//a

/div

/div

div class=”Projection”/div

/div

/body

/html

script src=”jquery-1.4.js”/script

script type=”text/javascript”

var pimgs = [

{“small”:””, “big”:””, “desc”:”TVpad2“芯”升級，“智”變革”},

{“small”:””, “big”:””, “desc”:”操控流暢，極致體驗”},

{“small”:””, “big”:””, “desc”:”更多選擇，正版認證”},

{“small”:””, “big”:””, “desc”:”內置wifi，舒適體驗”},

{“small”:””, “big”:””, “desc”:”輕鬆打造客廳KTV”},

{“small”:””, “big”:””, “desc”:”互動遊戲，自由掌控”},

{“small”:””, “big”:””, “desc”:”網絡通話，全球暢聊”}

];

var pageNo = 1; // 當前頁碼

var pageSize = 5; // 每頁顯示張數

$(function(){

initImg(pageNo);

//loadImage();

});

// 預先下載圖片

function loadImage() {

for (var i = 0; i pimgs.length; i++) {

new Image().src = pimgs[i][“big”];

new Image().src = pimgs[i][“small”];

}

}

// 翻頁（op: -1表示向左翻，1表示向右翻）

function changePage(op) {

var left = -1; // 向左翻

var right = 1; // 向右翻

var pageSum = pimgs.length / pageSize; // 總頁數

if (op == right) {

if (pageNo pageSum) {

initImg(++pageNo);

}

} else if (op == left) {

if (pageNo 1) {

initImg(–pageNo);

}

}

}

// 顯示初始化

function initImg(pageNo) {

var start = (pageNo – 1) * pageSize;

var end = pageNo * pageSize;

if (end pimgs.length) {

end = pimgs.length;

}

$(“#smallImgList”).find(“li”).remove();

for (var i = start; i end; i++) {

var smallImg = ‘li’+

‘a href=”javaScript:void(0)”img id=”small” src=”‘+ pimgs[i][“small”] +'” big=”‘+ pimgs[i][“big”] +'” //a’+

‘a href=”javaScript:void(0)”‘+ pimgs[i][“desc”] +’/a’+

‘/li’;

$(“#smallImgList”).append(smallImg);

}

// 點擊小圖時顯示對應的大圖

$(“#smallImgList”).find(“li”).each(function(){

var $this = $(this);

var bigImg = $this.find(“#small”).attr(“big”);

$this.mousedown(function(){

$(“#bigImg”).attr(“src”, bigImg);

});

});

}

/script

通過js加載就實現了lazyload，希望能幫到你。

這個例子需要導入jquery才能正確運行。