4

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

<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>

在此，代码（包括表单）和图像（谷歌图像）同时加载。

如何使表单（输入）首先加载，然后再加载图像？

4

6 回答 6

5

DOM 准备好后，您可以设置src图像的 ..

<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 属性) 到图像，以便浏览器可以正确计算页面的最终外观，甚至在图像加载之前..

于 2012-04-24T17:52:18.343 回答
4

你是什​​么意思

它们同时加载

因为它们不是同时加载的，所以首先加载页面并在img解析标签时并行加载图像。所以实际上浏览器几乎可以满足您的需求，您可以通过加载缓慢的 img 来测试它，您会看到您的表单将首先加载。

无论如何，您要解决的实际问题是什么。

于 2012-04-24T17:58:16.830 回答
2

检查此代码。您应该在页面中包含 jquery 或将 jquery 代码转换为普通 javascript

http://jsfiddle.net/pt4DT/

于 2012-06-04T06:45:40.393 回答
1

还有一个：

尝试这个

HTML：

<div id="google-search-container">
    <form method="get" action="//www.google.com/search">
        <div id="google-logo"></div>
        <input id="q" name="q" />
        <input type="submit" value="Google Search" />
    </form>
</div>

JavaScript：

function addLogo() {
    document.getElementById('google-logo').style.backgroundImage = "url('//www.google.com/images/srpr/logo3w.png')";
}
window.onload = function() {
    addLogo();
}

CSS：

#google-search-container {
    text-align: center
}
#google-logo {
    margin: 10px auto;
    background-repeat: no-repeat;
    background-size:275px 95px;
    height: 95px;
    width: 275px
}
#q {
    width: 300px
}
于 2012-06-06T23:30:56.673 回答
1

我希望表单（输入）首先加载（并且用户能够更早地编写），因为图像并不重要，我希望它们在最后加载（在所有 html、css 和 js 加载之后）

好的，首先让我说这仅适用于我认为从大约 IE6 开始的所有较新浏览器（不确定确切时间），但这仍然应该是绝大多数。

下面你可以看到一个包含 html 的典型页面加载的图像（第一行是 html，第二个 js，第三和第四个 css，最后一个图像）。 显示页面加载的瀑布

如您所见，首先加载 html，因为它需要知道需要加载哪些 js 和 css。现在 - 这取决于浏览器和阻塞/非阻塞 javascript - 图像本身有时与 js/css 并行加载，或者在 css 和 javascript 完成下载后加载（如上图所示）。无论哪种方式，无论浏览器决定做什么，它都将是最佳解决方案（例如，大多数浏览器将并行执行的 https 请求数量存在限制，这由 spdy 协议解决，但那是另一回事了）。现在，更仔细地查看图表，您可以看到两条线，一条蓝线显示页面何时显示给用户（有表单，但没有图像），以及 DOM 完成加载后的一条绿线（包括图片）。因此，浏览器已经在做你想做的事了。但是，由于两点之间只有大约 100 毫秒，除非您有很多图像，否则您可能不会有意识地看到这一点。

唯一重要的是不要在 javascript 中锁定页面的加载，这可以极大地加快页面的加载速度（例如，在页面完成加载后通过将其动态注入页面来加载大多数 javascript ）。无论哪种方式，任何优化都受益于在 firefox（使用firebug并转到 net 选项卡）或 chrome（按 F12 并转到 network 选项卡）中查看页面加载的瀑布（上图）显示什么加载时并试图让蓝线尽可能向左移动。

于 2012-06-04T13:08:45.113 回答
1

试试这个： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
function Addimg()
{
    document.getElementById("googleimg").src = "http://www.google.com/images/srpr/logo3w.png";
}
</script>
</head>

<body onload="Addimg()">
<div style="text-align:center">
<form method="get" action="http://www.google.com/search">
<img id="googleimg" src=""><br><input style="width:300px"name="q">
<input type="submit" value="Google Search" >
</form></div>
</body>

</html>
于 2012-06-05T06:34:30.820 回答