Svelte window 元素打開：加載回調未在移動 Safari 中觸發

Question

我正在開發一個 Svelte 和 Sapper static 站點，我正在導出並上傳到服務器。 The rollup.config.js and package.json are as in the sapper-template on Github with a slight modification to the package.json to avoid issues with.DS_store when developing on mac:

"scripts": {
  "dev": "yarn dsstore:delete && sapper dev",
  "build": "yarn dsstore:delete && sapper build --legacy",
  "export": "yarn dsstore:delete && sapper export --legacy",
  "start": "node __sapper__/build",
  "dsstore:delete": "find . -name \".DS_Store\" -delete"
}

我在主頁上重復大約十次的苗條組件中使用以下代碼。 這是一個以高品質攝影為主要內容的網站，因此我正在加載重圖像作為組件的背景圖像。 為了平滑圖像加載體驗，我首先在背景中加載一個非常輕的占位符圖像，然后根據 window 大小，在頂部加載兩個不同大小的背景圖像之一：

<script>
    export let project;
    let { id, src, src_small } = project;

    let el;
    let breakpointCondition = "(max-width: 1000px)";
    let view;
    let imageSrc;

    const checkView = (e) => {
        console.log(document);
        el = document.getElementById(id);
        console.log(el);
        view = window.matchMedia(breakpointCondition);
        if (view.matches) {
            imageSrc = src_small;
        } else {
            imageSrc = src;
        }

        el.style.backgroundImage = `url(${imageSrc}), url('images/placeholder.png')`;   
    }

</script>

<svelte:window on:load={checkView} on:resize={checkView} />

<section id={id} >

...

<section>

<style>

    section {
        background-image: url('/images/placeholder.png');
    }

</style>

此代碼在桌面瀏覽器上按預期工作。 頁面加載后，纖細的 window 元素變為可用，我可以查詢它以加載適當的背景圖像。 在 ios 瀏覽器（移動 Safari、Chrome 和 Firefox）上，當我導航到頁面時，不會加載來自 javascript 的背景圖像，但如果我刷新頁面，它們會加載。

我嘗試替換：

<svelte:window on:load={console.log('load')} on:resize={console.log('resize')} />

並發現 window.onload 和 window.onresize 事件在頁面加載時在桌面和移動瀏覽器上觸發。 奇怪的是，當我在頁面加載后調整 window 的大小時，沒有出現任何日志，但是window.matchMedia方法似乎繼續完成它的工作，並且圖像交換發生在適當的斷點處。

當我將日志放在checkView回調 function 的開頭時，我看到在觸發onload事件時，當頁面首次在 Z9E304D4E8DF1B74CFA009913198 移動瀏覽器上加載時，function 沒有觸發當我在 ios 瀏覽器上重新加載頁面時，回調 function 觸發，我得到了預期的結果。

為什么會發生這種情況，我該如何解決？ 此方法在桌面上運行良好。

更新：當頁面加載時使用onMount觸發checkView

<svelte:window on:resize={checkView} />

當 window 調整大小時工作。 問題仍然懸而未決，以防有人回答原因

<svelte:window on:load={checkView}>

在移動 Safari 中的初始頁面加載時不會觸發回調。

Answer 1

據我所知， <svelte:window />可以讓您收聽window事件，因此您可以使用它，例如，通過on:resize來收聽“調整大小”事件。 至於on:load ：

（參見 MDN 的 Window：加載事件：）

加載整個頁面時會觸發 load 事件，包括所有相關資源，例如樣式表和圖像。 這與 DOMContentLoaded 不同，后者在頁面 DOM 加載后立即觸發，無需等待資源完成加載。

所以，如果頁面被加載並且 load 事件已經被觸發，那么監聽這個事件是多余的並且回調永遠不會調用。 當頁面真正完成加載時檢查您的代碼（index.html？）

如果您想確保特定 Svelte 組件中的 DOM 元素已完成渲染，Svelte 建議使用其onMount(() => {})回調：

<script>
    export let project;
    let { id, src, src_small } = project;

    let el;
    let breakpointCondition = "(max-width: 1000px)";
    let view;
    let imageSrc;

    onMount(() => {
        console.log(document);
        el = document.getElementById(id);
        console.log(el);
        view = window.matchMedia(breakpointCondition);
        if (view.matches) {
            imageSrc = src_small;
        } else {
            imageSrc = src;
        }

        el.style.backgroundImage = `url(${imageSrc}), url('images/placeholder.png')`;   
    })

</script>

<section id={id} >
...
</section>

<style>

    section {
        background-image: url('/images/placeholder.png');
    }

</style>