一組小型的自適應(yīng)CSS模塊，可以在每個(gè)Web項(xiàng)目中使用-Pure

紹

Pure.css是一組小型的自適應(yīng)CSS模塊，可以在每個(gè)Web項(xiàng)目中使用。Pure以Normalize.css為基礎(chǔ)，并提供native HTML元素以及最常見(jiàn)的UI組件的布局和樣式，考慮到移動(dòng)設(shè)備，Pure具有開(kāi)箱即用的響應(yīng)能力，因此元素在所有屏幕尺寸上都看起來(lái)不錯(cuò)。

<link rel="stylesheet" href="./pure-min.css"  />

PS：Normalize.css使瀏覽器更一致地渲染所有元素，并符合現(xiàn)代標(biāo)準(zhǔn)。它只針對(duì)需要規(guī)范化的樣式。

Github

https://github.com/pure-css/pure

兼容性

IE 8+

Latest Stable: Firefox, Chrome, Safari

iOS 6-8

Android 4.4+

布局

通過(guò)使用Grid，Menu等，可以輕松創(chuàng)建適用于所有屏幕尺寸的精美響應(yīng)式布局。

Pure的設(shè)計(jì)目標(biāo)是可以在每個(gè)Web項(xiàng)目中使用它

定制化

與其他框架不同，Pure的設(shè)計(jì)不受限制，最小且扁平。添加新的CSS規(guī)則比覆蓋現(xiàn)有規(guī)則要容易得多。通過(guò)添加幾行CSS，可以自定義Pure的外觀以與你的Web項(xiàng)目一起使用。

表單

以下創(chuàng)建默認(rèn)的內(nèi)聯(lián)表單，將pure-form類(lèi)名添加到任何<form>元素。如下

<form class="pure-form">
    <fieldset>
        <legend>A compact inline form</legend>

        <input type="email" placeholder="Email">
        <input type="password" placeholder="Password">

        <label for="remember">
            <input id="remember" type="checkbox"> Remember me
        </label>

        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>

還有其他常見(jiàn)類(lèi)型表單，本文不過(guò)多介紹

按鈕

表格

要設(shè)置HTML表的樣式，請(qǐng)?zhí)砑?strong class="highlight-text">pure-table類(lèi)名。此類(lèi)為表元素添加了填充和邊框，并強(qiáng)調(diào)了標(biāo)題。

菜單

垂直菜單

默認(rèn)情況下，菜單是垂直的。

水平菜單

要?jiǎng)?chuàng)建水平菜單，請(qǐng)?zhí)砑?strong class="highlight-text">pure-menu-horizontal類(lèi)名稱(chēng)。

總結(jié)

本文只介紹了部分有關(guān)于Pure的內(nèi)容，詳細(xì)的介紹可以Github以及官方提供的詳細(xì)內(nèi)容和使用指南！

之前的文章中，我們討論了圖片的尺寸自適應(yīng)、裁切與縮放、壓縮、動(dòng)態(tài)webp等技術(shù)。這些技術(shù)都是對(duì)單張圖片的處理，而在實(shí)際項(xiàng)目中，我們往往需要處理大量的圖片。本文將討論如何高效批量?jī)?yōu)化圖片，并介紹一些圖片加載技巧。

一、圖片預(yù)加載

圖片預(yù)加載（Preloading Images）是一種提前加載即將使用的圖片資源的技術(shù)。通過(guò)在頁(yè)面加載時(shí)就將未來(lái)可能用到的圖片資源進(jìn)行預(yù)加載，可以在用戶(hù)真正需要這些圖片時(shí)，減少等待時(shí)間，提升用戶(hù)體驗(yàn)。

HTML中的預(yù)加載

在HTML中，可以通過(guò)<link>標(biāo)簽的rel屬性來(lái)實(shí)現(xiàn)圖片預(yù)加載。例如，我們可以在頁(yè)面的`<head>`標(biāo)簽中添加如下代碼：

<link rel="preload" href="image.jpg" as="image" fetchpriority="high">

該 <link> 標(biāo)簽用于預(yù)加載一個(gè)圖片資源。讓我們逐個(gè)解釋其中的屬性及其作用：

rel="preload":

當(dāng)前<link>標(biāo)簽的用途是預(yù)加載資源。preload告訴瀏覽器提前加載指定的資源（在這里是圖片），以便在后續(xù)使用時(shí)能夠更快地提供資源。這有助于提高頁(yè)面的加載性能，尤其是在資源密集型的網(wǎng)站上。

href="image.jpg":

指定要預(yù)加載的資源的URL。href屬性是一個(gè)URL，指向需要預(yù)加載的資源。在這個(gè)例子中，image.jpg是要預(yù)加載的圖片的路徑。

as="image":

指定預(yù)加載資源的類(lèi)型。as屬性告訴瀏覽器預(yù)加載資源的類(lèi)型，以便正確地處理和優(yōu)化加載過(guò)程。在這個(gè)例子中，as="image"明確了資源是一個(gè)圖片。這對(duì)于瀏覽器優(yōu)化資源加載順序和優(yōu)先級(jí)非常重要。

fetchpriority="high":

指定預(yù)加載資源的獲取優(yōu)先級(jí)。fetchpriority屬性是一個(gè)新的屬性，用于指示瀏覽器在預(yù)加載資源時(shí)的優(yōu)先級(jí)。在這個(gè)例子中，fetchpriority="high"告訴瀏覽器這是一個(gè)高優(yōu)先級(jí)的資源，應(yīng)該盡快加載。這在需要確保關(guān)鍵資源（如首屏圖片）快速加載時(shí)非常有用。

CSS中的預(yù)加載

在CSS中，可以通過(guò)background-image屬性來(lái)實(shí)現(xiàn)圖片預(yù)加載。例如，我們可以在CSS文件中添加如下代碼：

.preload {
 background-image: url('image.jpg');
}

這段CSS代碼定義了一個(gè)`.preload`類(lèi)，其中包含了一個(gè) background-image 屬性，指定了要預(yù)加載的圖片資源的URL。在頁(yè)面加載時(shí)，瀏覽器會(huì)提前加載這個(gè)圖片資源，以便在后續(xù)使用時(shí)能夠更快地提供資源。

JavaScript中的預(yù)加載

在JavaScript中，可以通過(guò)Image對(duì)象來(lái)實(shí)現(xiàn)圖片預(yù)加載。例如，我們可以在JavaScript代碼中添加如下代碼：

var img = new Image();
img.src = 'image.jpg';

這段JavaScript代碼創(chuàng)建了一個(gè)新的Image對(duì)象，并設(shè)置了src屬性為要預(yù)加載的圖片資源的URL。當(dāng)這段代碼執(zhí)行時(shí)，瀏覽器會(huì)開(kāi)始加載這個(gè)圖片資源，以便在后續(xù)使用時(shí)能夠更快地提供資源。

二、圖片懶加載

圖片懶加載（Lazy Loading Images）是一種延遲加載圖片資源的技術(shù)。通過(guò)在頁(yè)面加載時(shí)只加載可見(jiàn)區(qū)域內(nèi)的圖片資源，可以減少頁(yè)面的加載時(shí)間，提升用戶(hù)體驗(yàn)。

img loading屬性

在HTML中，可以通過(guò)loading屬性來(lái)實(shí)現(xiàn)圖片懶加載。例如，我們可以在<img>標(biāo)簽中添加如下代碼：

<img src="image.jpg" loading="lazy" alt="Image">

loading屬性是一個(gè)新的屬性，用于指定圖片的加載方式。它有三個(gè)可能的值：

auto: 默認(rèn)值，表示圖片會(huì)在頁(yè)面加載時(shí)立即加載。
lazy: 表示圖片會(huì)在視口內(nèi)時(shí)才會(huì)加載。
eager: 表示圖片會(huì)在頁(yè)面加載時(shí)立即加載，不管是否在視口內(nèi)。

Intersection Observer API

在JavaScript中，可以通過(guò)Intersection Observer API來(lái)實(shí)現(xiàn)圖片懶加載。Intersection Observer API是一種用于監(jiān)視元素與視口交叉狀態(tài)的API，可以用于實(shí)現(xiàn)懶加載、無(wú)限滾動(dòng)等功能。

例如，我們可以在JavaScript代碼中添加如下代碼：

// 創(chuàng)建一個(gè)IntersectionObserver實(shí)例
 const intersectionObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
  if (entry.isIntersecting) {
  // 當(dāng)元素與視窗交叉時(shí)執(zhí)行的操作
  const img = entry.target; // entry.target是交叉的元素
  // 假設(shè)data-src屬性包含了圖片的路徑
  img.src = img.dataset.src;
  intersectionObserver.unobserve(img); // 停止觀察該元素
 }
 });
});

// 為所有需要滾動(dòng)加載的元素（例如圖片）設(shè)置觀察
document.querySelectorAll('img[data-src]').forEach((img) => {
 intersectionObserver.observe(img);
});

這段JavaScript代碼創(chuàng)建了一個(gè)IntersectionObserver實(shí)例，并為所有帶有data-src屬性的圖片元素設(shè)置了觀察。當(dāng)圖片元素與視口交叉時(shí)，會(huì)加載圖片資源，并停止觀察該元素。

Scroll事件

在JavaScript中，也可以通過(guò)監(jiān)聽(tīng)scroll事件來(lái)實(shí)現(xiàn)圖片懶加載。例如，我們可以在JavaScript代碼中添加如下代碼：

// 獲取所有帶有data-src屬性的圖片元素
 const lazyImages = document.querySelectorAll('img[data-src]');
 // 懶加載函數(shù)
 function lazyLoad() {
  lazyImages.forEach((img) => {
  if (img.offsetTop < window.innerHeight + window.pageYOffset + 200) {
  img.src = img.dataset.src;
  img.removeAttribute('data-src');
  }
 });
 // 更新 lazyImages，排除已加載的圖片
 lazyImages = document.querySelectorAll('img[data-src]');
 // 如果所有的圖片都已經(jīng)加載，則移除事件監(jiān)聽(tīng)器
 if (lazyImages.length === 0) {
 document.removeEventListener('scroll', lazyLoad);
 }
}
// 監(jiān)聽(tīng)scroll事件
document.addEventListener('scroll', lazyLoad);
// 初始檢查一次，以便在頁(yè)面加載時(shí)懶加載位于視窗中的圖片
lazyLoad();

這段JavaScript代碼監(jiān)聽(tīng)了scroll事件，并在圖片元素進(jìn)入視口時(shí)加載圖片資源。當(dāng)圖片進(jìn)入視口時(shí)，會(huì)加載圖片資源，并移除data-src屬性。

結(jié)合多種方法來(lái)實(shí)現(xiàn)圖片懶加載

在實(shí)際項(xiàng)目中，我們可以結(jié)合多種方法來(lái)實(shí)現(xiàn)圖片懶加載，以便在不同瀏覽器和環(huán)境下提供最佳的用戶(hù)體驗(yàn)。例如，我們可以先檢查瀏覽器是否支持loading屬性，如果支持，則使用`loading`屬性實(shí)現(xiàn)圖片懶加載；如果不支持，則檢查瀏覽器是否支持Intersection Observer API，如果支持，則使用Intersection Observer API實(shí)現(xiàn)圖片懶加載；如果不支持，則使用scroll事件實(shí)現(xiàn)圖片懶加載。

下面是一個(gè)示例代碼，演示了如何結(jié)合多種方法來(lái)實(shí)現(xiàn)圖片懶加載：

html

<body>
 <img src="placeholder.jpg" data-src="image1.jpg" alt="Description 1">
 <img src="placeholder.jpg" data-src="image2.jpg" alt="Description 2">
 <img src="placeholder.jpg" data-src="image3.jpg" alt="Description 3">
 <!-- 更多 img -->
 <script src="lazyload.js"></script>
</body>

javascript

const lazyImages = document.querySelectorAll('img[data-src]');
// 判斷瀏覽器是否支持 loading 屬性
if('loading' in HTMLImageElement.prototype) {
  lazyImages.forEach(img => {
  img.src = img.dataset.src;
  });
 } else if('IntersectionObserver' in window) {
  // 使用Intersection Observer API實(shí)現(xiàn)懶加載
 const intersectionObserver = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 const img = entry.target;
 img.src = img.dataset.src;
 intersectionObserver.unobserve(img);
 }
 });
 });

 lazyImages.forEach((img) => {
 intersectionObserver.observe(img);
 });
} else {
 // 使用scroll事件實(shí)現(xiàn)懶加載
 let lazyImages = document.querySelectorAll('img[data-src]');
 function lazyLoad() {
 lazyImages.forEach((img) => {
 if (img.offsetTop < window.innerHeight + window.pageYOffset + 200) {
 img.src = img.dataset.src;
 img.removeAttribute('data-src');
 }
 });
 lazyImages = document.querySelectorAll('img[data-src]');
 if (lazyImages.length === 0) {
 document.removeEventListener('scroll', lazyLoad);
 }
 }
 document.addEventListener('scroll', lazyLoad);
 lazyLoad();
}

三、漸進(jìn)式圖片加載

圖片漸進(jìn)式加載（Progressive Image Loading）是一種逐步加載圖片資源的技術(shù)。通過(guò)在圖片加載過(guò)程中逐步顯示模糊的低分辨率圖片，可以提升用戶(hù)體驗(yàn)，減少等待時(shí)間。這種技術(shù)不僅適用于優(yōu)化頁(yè)面性能，還可以為用戶(hù)提供視覺(jué)上的反饋，使頁(yè)面顯得更加流暢。

漸進(jìn)式 JPEG

漸進(jìn)式 JPEG (Progressive JPEG) 是一種通過(guò)逐步顯示圖片的技術(shù)，漸進(jìn)式 JPEG 與標(biāo)準(zhǔn)的 JPEG 圖片區(qū)別在于，漸進(jìn)式 JPEG 圖片在加載時(shí)會(huì)逐步顯示圖片的分辨率，而不是一次性顯示完整的圖片。這種逐步加載的方式可以提升用戶(hù)體驗(yàn)，減少等待時(shí)間。漸進(jìn)式 JPEG 圖片最初會(huì)顯示的是一張模糊的低分辨率圖片，隨著數(shù)據(jù)的不斷加載，圖片的分辨率會(huì)逐步提高，直至達(dá)到全分辨率。這種方法特別適合需要加載大圖的場(chǎng)景。

許多圖像編輯工具和壓縮工具都支持將圖片保存為漸進(jìn)式 JPEG。在實(shí)際項(xiàng)目中，例如，在 Photoshop 中保存圖片時(shí)，可以勾選“漸進(jìn)式”選項(xiàng)。也可以使用命令行工具如ImageMagick（https://imagemagick.org/index.php）來(lái)生成漸進(jìn)式 JPEG：

1convert input.jpg -interlace Plane output.jpg

需要注意的是漸進(jìn)式 JPEG 圖片的文件大小通常會(huì)比標(biāo)準(zhǔn)的 JPEG 圖片稍大，因?yàn)闈u進(jìn)式 JPEG 圖片包含了更多的數(shù)據(jù)，用于逐步顯示圖片的分辨率，但是這種額外的數(shù)據(jù)可以提升用戶(hù)體驗(yàn)。因此，在選擇使用漸進(jìn)式 JPEG 圖片時(shí)，需要權(quán)衡圖片質(zhì)量和文件大小之間的關(guān)系。

占位圖技術(shù)

占位圖技術(shù)（Placeholder Image）通常使用一個(gè)非常小的、模糊的低分辨率圖像作為占位符，在高分辨率圖像加載完成之前先顯示出來(lái)。這種方法通過(guò)減少初始加載時(shí)間和網(wǎng)絡(luò)請(qǐng)求，可以顯著提升頁(yè)面的首屏加載速度。

占位圖實(shí)現(xiàn)原理很簡(jiǎn)單，只需要在頁(yè)面中插入一個(gè)占位圖像，然后在高分辨率圖像加載完成后替換為真實(shí)圖像即可。

生成一個(gè)小尺寸的圖片，并將其模糊化處理。
在頁(yè)面初始加載時(shí)，先顯示這張模糊的小圖，待高分辨率圖像加載完成后再替換。

代碼示例：

html:

<img src="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?format=webp&dis_rule=20x0_q50_" data-src="https://fs.autohome.com.cn/energyspace_views/image_demo/compress_before.png?format=webp&dis_rule=400x0_q90_" alt="Description">

javascript：

document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('img[data-src]');
  lazyImages.forEach(img => {
  const placeholder = new Image();
  placeholder.src = img.src;
  placeholder.onload = () => {
  img.src = img.dataset.src;
  };
  });
});

img src 屬性中的圖片是一個(gè)模糊的小圖，data-src 屬性中的圖片是高分辨率圖像。在頁(yè)面加載時(shí)，先顯示模糊的小圖，待高分辨率圖像加載完成后再替換。

使用占位圖技術(shù)可以有效減少頁(yè)面的加載時(shí)間，提升用戶(hù)體驗(yàn)。同時(shí)，占位圖技術(shù)也可以結(jié)合圖片懶加載技術(shù)一起使用，進(jìn)一步提升頁(yè)面性能。

四、Base64 編碼

在 Web 開(kāi)發(fā)中，將圖片轉(zhuǎn)換為 Base64 編碼是一種優(yōu)化頁(yè)面加載速度的方法，但需要權(quán)衡其優(yōu)缺點(diǎn)。一般來(lái)說(shuō)，適用于 Base64 編碼的圖片大小取決于幾個(gè)因素，包括頁(yè)面的總體加載時(shí)間、HTTP 請(qǐng)求的數(shù)量以及文件大小。

Base64 編碼的優(yōu)點(diǎn)

減少 HTTP 請(qǐng)求：將圖像嵌入到 HTML 或 CSS 中可以減少 HTTP 請(qǐng)求，從而加快頁(yè)面加載速度。對(duì)于小圖標(biāo)或背景圖片，效果尤為顯著。
簡(jiǎn)單易用：Base64 編碼圖像是一種文本格式，可以方便地嵌入 HTML、CSS 或 JSON 中，不需要額外的圖像文件管理。
適用于小圖像：Base64 編碼特別適合用于小圖像，例如網(wǎng)站的 logo、按鈕、圖標(biāo)等。

Base64 編碼的缺點(diǎn)

增加文件體積：Base64 編碼會(huì)使文件體積增加，因此對(duì)于大圖像，不推薦使用這種方法。
緩存問(wèn)題：由于 Base64 圖像嵌入在 HTML 或 CSS 文件中，瀏覽器不能單獨(dú)緩存這些圖像文件，因此在更新圖像時(shí)需要重新下載整個(gè) HTML 或 CSS 文件。
可讀性差：Base64 編碼圖像是一長(zhǎng)串字符，嵌入到文檔中會(huì)降低文檔的可讀性和可維護(hù)性。

適合轉(zhuǎn)為 Base64 的圖片大小一般為 1KB 到 10KB 的圖片：通常，文件大小在 1KB 到 10KB 之間的圖片是轉(zhuǎn)為 Base64 編碼的最佳選擇。這樣的圖片往往是小圖標(biāo)、按鈕、背景圖案等。對(duì)于這些小圖片，Base64 編碼可以顯著減少 HTTP 請(qǐng)求的數(shù)量，從而提升頁(yè)面加載速度。

在實(shí)際Web項(xiàng)目開(kāi)發(fā)中，使用 Webpack或 Vite 將小圖片自動(dòng)轉(zhuǎn)換為 Base64 編碼是一個(gè)常見(jiàn)的優(yōu)化方法。這種自動(dòng)化的處理可以簡(jiǎn)化開(kāi)發(fā)流程，并確保在構(gòu)建過(guò)程中優(yōu)化資源。

webpack 配置示例：

module.exports = {
  module: {
  rules: [
  {
  test: /\.(png|jpe?g|gif)$/i,
  use: [
  {
  loader: 'url-loader',
  options: {
 limit: 10240, // 10KB
 },
 },
 ],
 },
 ],
 },
};

Vite 配置示例：

import { defineConfig } from 'vite';

export default defineConfig({
 build: {
 assetsInlineLimit: 10240, // 10KB
 },
});

在以上配置中，limit 或 assetsInlineLimit 選項(xiàng)指定了圖片轉(zhuǎn)為 Base64 編碼的閾值，超過(guò)這個(gè)閾值的圖片將被單獨(dú)打包為文件，而小于這個(gè)閾值的圖片將被轉(zhuǎn)為 Base64 編碼。

五、結(jié)語(yǔ)

通過(guò)結(jié)合多種圖片加載與優(yōu)化技術(shù)，可以提升頁(yè)面性能，提供更好的用戶(hù)體驗(yàn)。預(yù)加載、懶加載、漸進(jìn)式加載等技術(shù)在不同場(chǎng)景下有著不同的優(yōu)勢(shì)，通過(guò)合理地選擇和組合這些技術(shù)，可以有效地優(yōu)化圖片加載過(guò)程。

在實(shí)際項(xiàng)目中，建議根據(jù)項(xiàng)目的具體需求，選擇合適的技術(shù)和工具進(jìn)行圖片優(yōu)化和加載。希望本文所介紹的技術(shù)和示例代碼能夠幫助您更好地實(shí)現(xiàn)圖片批量處理與加載優(yōu)化，提升網(wǎng)頁(yè)的加載速度和用戶(hù)體驗(yàn)。

WEB 圖片優(yōu)化的相關(guān)文章到此結(jié)束，希望對(duì)你有所幫助。如果有任何問(wèn)題或建議，歡迎在評(píng)論區(qū)留言，謝謝！

作者:之家-梁家瑋

來(lái)源-微信公眾號(hào):之家前端共享流

出處:https://mp.weixin.qq.com/s/bhxtIED32lJP7PY9g28GNA

頁(yè)美工培訓(xùn)機(jī)構(gòu)教你用讓背景圖片拉伸填充的css屬性，比如一個(gè)容器(body,div,span)中設(shè)定一個(gè)背景。這個(gè)背景的長(zhǎng)寬值在css2.1之前是不能被修改的。

所以實(shí)際的結(jié)果是只能重復(fù)顯示，所以出現(xiàn)了repeat,repeat-x,repeat-y,no-repeat這些屬性。就是用來(lái)

控制背景圖片的顯示的。所以一般用作背景圖片的有2類(lèi)：

1.是一整張大圖，尺寸和區(qū)域大小剛好吻合

2.一個(gè)很小的條狀圖，通過(guò)repeat后，形成一個(gè)很規(guī)則的大圖背景。

但是css3出現(xiàn)以后，這個(gè)情況被改善了。background-size 屬性可以讓我們之前的希望成真。

而且這個(gè)屬性在firefox，chrome，以及ie9上都可以使用。

具體使用方法如下：（上海網(wǎng)頁(yè)美工設(shè)計(jì)培訓(xùn)）

背景圖尺寸(數(shù)值表示方式)：

#background-size{

background-size:200px 100px;

}

在線(xiàn)咨詢(xún)

上一篇：精通HTML表格：打造互動(dòng)豐富、視覺(jué)吸引的網(wǎng)頁(yè)內(nèi)容
下一篇：HTML5最新版本介紹

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

一組小型的自適應(yīng)CSS模塊，可以在每個(gè)Web項(xiàng)目中使用-Pure

紹

Github

相關(guān)特性

兼容性

布局

定制化

表單

按鈕

表格

菜單

總結(jié)

一、圖片預(yù)加載

您的項(xiàng)目需求

整合營(yíng)銷(xiāo)服務(wù)商

一組小型的自適應(yīng)CSS模塊，可以在每個(gè)Web項(xiàng)目中使用-Pure

紹

Github

相關(guān)特性

兼容性

布局

定制化

表單

按鈕

表格

菜單

總結(jié)

一、圖片預(yù)加載

您的項(xiàng)目需求

一、圖片預(yù)加載