離子應用程序中的圖像

Question

我想知道什麼是在應用程序內顯示圖像的最佳方法？

在獲取請求時最好拉URL，還是使用base64和解碼更快？

謝謝

Answer 1

使用基本64圖像，不要讓圖像放慢頁面的渲染速度。使用推遲加載的圖像。

的HTML：

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here"> 

中的JavaScript：

<script> 
function init() { 
var imgDefer = document.getElementsByTagName('img'); 
for (var i=0; i<imgDefer.length; i++) { 
if(imgDefer[i].getAttribute('data-src')) { 
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src')); 
} } } 
window.onload = init; 
</script> 

用法：

對於大多數頁面，你可以簡單地把該腳本的 結束標記之前的權利在你的HTML。就圖像而言，您想複製上面的代碼（標記爲「html」） ，並用 替換您的實際圖像路徑中的「your-image-here」。

此博客將幫助你。 https://varvy.com/pagespeed/defer-images.html