Question

在我的网络应用中，我使用以下方法“内联”外部SVG文件：

function inlineSVG(){
var SVGFile="image/myFile.svg"
loadXML = new XMLHttpRequest();
svgDiv = document.createElement("div"); 
svgDiv.id= "svgInlineDiv";  
svgDiv.style.cssText = 'width:0px;height:0px;'; 
document.body.appendChild(svgDiv);
    if (loadXML != null ){
        loadXML.open("GET", SVGFile, true);
        loadXML.onreadystatechange = handler;
        loadXML.send();
        }
}
function handler(){
            if(loadXML.readyState == 4 && loadXML.status == 200){
            svgDiv.innerHTML=loadXML.responseText
            }
}

是否可以预加载此文件并分配从

检索的“ var SVGFile”值

<link href="image/myFile.svg" rel="preload" >

在标题中指定？

Answer 1

<link rel="preload" >的用途只是在加载资源时对进行重新排序。如果您只有XHR请求，则该脚本将在执行脚本时熄灭。如果定义了预加载链接，则该请求可能会更早执行。但是您仍然需要脚本中的loadXML.send();，只是在执行时可能已经缓存了资源。

请注意，预加载does not delay文档load事件，因此不能保证资源已经在缓存中，只有更好的机会。

如果这是您要实现的目标，请设置as属性以指示将使用该资源的目的地：

<link id="uniqueid" href="image/myFile.svg" rel="preload" as="fetch" >

如果资源来自另一个域，则可能需要一个crossorigin属性。

要从链接中检索文件地址，可以使用

进行访问

var SVGFile = document.querySelector('#uniqueid').href;

从预加载的内容内联外部SVG文件

1 个答案: