Javascript阵列中的图像URL是否自动预加载到浏览器中？

我只是在我没有看到直接回答的问题上寻找确认。Javascript阵列中的图像URL是否自动预加载到浏览器中？

我正在建设一个网站，我想将许多图像网址加载到一个Javascript数组中，而不实际发送图像到浏览器。为了减少服务器带宽使用量，我希望将URL存储在文档中，并且只在用户采取特定操作时才加载它们。

我想我的问题是许多“我如何使用Javascript预加载图像”的问题相反，如发现here。这些问题的流行表明，将URL粘贴在文档顶部的Javascript数组中并且浏览器不会自动预加载它们是安全的。我的假设是否正确？

来源

2014-11-22 Nate Vaughan

是的，这是正确的 – tucaz 2014-11-22 00:58:11

您可以通过测试直接回答这个问题。 – Mathletics 2014-11-22 00:59:42

如何？我可能很笨，但我不知道如何判断浏览器是否在后台加载了一个图像。图像相对较小，我从我自己的电脑上为他们服务，所以加载时间并不能提供很多线索。 – 2014-11-22 01:15:26

是的图像是非加载的，因为你有他们作为javascriptarray中的字符串，浏览器从不请求图像。

我猜你想要做的事，如：

var myimages = ['{url}','{url}','{url}'];

，那么你可以这样做：

$(document).on("click",".somebutton",function(){ 
    for(var i = 0, len = myimages.lenght; i++){ 
    //i will assume you will detect the element depending the situation and its a image element 
    $("someSelector").attr("src",myimages[i]); 
    } 
});

而且这样你会从你的服务器在确切时刻请求图像。

//使用jQuery

来源

2014-11-22 01:01:56 ncubica

没有，阵列中的图像将不会被加载，直到它们被脚本要求。因此，你可以将其存储在像这样的变量：

var imgSrcs = ["http://placekitten.com/g/300/200","http://placekitten.com/1000/1000"] 
 

 
function getSrc(element,value){ 
 
    
 
    element.src = imgSrcs[value]; 
 
    
 
    }

<img onclick="getSrc(this,'0')" src="#"/>

时，它的点击，或类似的东西加载图像。

我希望这有助于！

来源

2014-11-22 01:02:03

url本身，以字符串的形式不会预先加载任何东西。您可以随意放置任意字符串数组，而无需担心图像预加载。

如果你想加载一个，你可以创建一个图像并为其'src'属性指定一个url。

var image = new Image(); 
image.src = "http://www.example.com/image/url.jpg";

来源

2014-11-22 01:02:12 Christopher

Javascript阵列中的图像URL是否自动预加载到浏览器中？

回答

相关问题