在HTML中预加载

Question

我做了一个简单的谷歌搜索代码,如下所示:

<div style="text-align:center">
<form method="get" action="http://www.google.com/search">
<img src="http://www.google.com/images/srpr/logo3w.png"><br><input style="width:300px"name="q">
<input type="submit" value="Google Search" >
</form></div>

在此,代码(包括表单)和图像(谷歌图像)同时加载.

如何首先加载表单(输入),而不是图像？

Answer 1

src一旦DOM准备就绪,您可以设置图像.

<div style="text-align:center">
    <form method="get" action="http://www.google.com/search">
        <img id="googleimage" data-src="http://www.google.com/images/srpr/logo3w.png"/><br>
        <input style="width:300px"name="q">
        <input type="submit" value="Google Search" >
    </form>
</div>

<script type="text/javascript">
   document.addEventListener("DOMContentLoaded", function(){
      var img = document.getElementById('googleimage');
      img.src = img.getAttribute('data-src');
   }, false);
</script>

演示http://jsfiddle.net/gaby/mpEeF/

只是添加,如果问题是因为图像被加载(可能在表单之前)表单被推下来,难以定位和编辑它,唯一的解决方案是添加实际大小(宽度/高度)通过style属性)到图像,以便浏览器可以正确计算页面的最终外观,甚至在图像加载之前.