img載入卡頓,解決辦法

2022-07-28 13:51:22 字數 1806 閱讀 6138

當前情況是:載入緩慢,載入時出現卡頓。

載入完:

2.banner圖載入情況

banner有3張圖,載入的時候就分了三層。發現這個情況的時候,我表示自己很萌萌噠。

1.css樣式和輪播圖js影響了的載入

初始情況下,我猜測是我的css樣式沒有寫好,可能js輪播也有問題。但是我在本地伺服器上訪問的時候,一切很正常。於是我排除了寫的js的問題。著重於檢查css。

我使用本身屬性『width』、『height』來寫的寬高,並將規定寬高的css樣式注釋掉。清除瀏覽器快取並重新整理網頁,載入卡頓的現象並沒有改善。

目前,暫時排除掉這個原因。

原諒此時的我大寫的懵逼臉

2.前端頁面卡頓?或者dom操作惹的禍,需優化**。

由於有些比較大,我用js控制根據框的大小等比例縮放顯示在框內。當然這個功能與banner無關,但是我還是擔心是我js的影響。

於是我注釋了這個js並清除掉瀏覽器快取後,重新整理頁面,載入還是一樣的慢,可見不是我這個js的鍋。

3.過大,導致載入時間過長,以致出現載入出現卡頓的現象。

以上兩個方法都沒有找到問題的原因所在。我仔細看了頁面的載入情況,請求數量不算多,但是每張請求成功載入出來花費的時間很長,有的甚至需要2、3s多。

我再去檢視了**、京東的載入情況,很快,都是毫秒,就沒有上秒的。

再看看我方官網上的,都是幾m的,甚至有幾十m的。

據此,我猜測是因為過大,導致載入時間過長,以致出現載入出現卡頓的現象。

將幾m甚至幾十m的壓縮到幾百k後,我表示人生已經圓滿了。將重新更新到伺服器的時候,我想這下應該解決問題了吧!!

但也只是我想想,問題並沒有被解決,頁面在載入時,仍然卡頓!!

迎面一盆冰水澆過來的感覺,我已經不造說什麼好。

4.採用預載入或分屏載入

採用以上兩種方式,頁面載入仍卡頓!!!

以上兩種方式會單獨說怎麼操作。

5.本地快取

仍然無用

6.ui儲存方式錯誤。應該採用漸進式的jpeg

我和後端童鞋一起,從各自的方向掙扎了n天,嘗試了n種方法,都沒能解決這種情況。

於是各自求助經驗比較豐富的人。

ui在儲存的時候,要儲存成漸進式的jpeg。

漸進式jpg顯示效果:

解決Chrome動畫」卡頓」的辦法

為動畫dom元素新增css3樣式 webkit transform transition3d 0,0,0 或 webkit transform translatez 0 這兩個屬性都會開啟gpu硬體加速模式,從而讓瀏覽器在渲染動畫時從cpu轉向gpu,其實說白了這是乙個小伎倆,也可以算是乙個hack...

無法載入php curl dll解決辦法

今天需要載入php curl.dll這個動態庫,在php.ini裡把extension php curl.dll前面的分號去掉。可是啟動apache的時候還是提示無法載入php curl.dll這個檔案,而且ext這個目錄下面也有php curl.dll這個檔案,可是為什麼就是找不到呢,真是百思不得...

VS未能載入包的解決辦法

執行vs2010時,報未能載入包 錯誤,解決方法 使用管理員許可權開啟 visual studio tools visual studio命令提示 中輸入 devenv resetuserdata 執行一下就好了。如果這個命令不行的話,可以試試這個 devenv resetskippkgs csdn...