Preload в HTML

Question

Я сделал простой поиск Google код, как это:

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

и в этом, код (включая формы) и изображений (картинок Google) нагрузок одновременно.

Как я могу сделать форму (ввод) для загрузки во-первых, а не изображения?

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> 

Demo в http://jsfiddle.net/gaby/mpEeF/

---

Просто добавив, что в случае, если проблема заключается в том, что, как изображения загружены (, который может быть до формы) форма сбрасывается вниз, что затрудняет ее поиск и редактирование, единственным решением было бы добавить фактические размеры (ширина/высота по стилю a ttribute) к изображениям, так что браузер может правильно рассчитать окончательный вид страницы, даже до того загружены изображения ..

Answer 2

Что вы имеете в виду

они загружены в то же время

потому что они не загружены в одно и то же время, сначала страница загружается и параллельно, как и теги img загружаются разобранные изображения. Таким образом, фактически браузер почти делает то, что вы хотите, вы можете проверить, что, имея медленно загружаемый файл img, вы увидите, что ваша форма загрузится первым.

В любом случае, в чем проблема, которую вы пытаетесь решить.

Answer 3

Проверьте этот код. Вы должны включить JQuery на странице или преобразовать код JQuery в обычный JavaScript

http://jsfiddle.net/pt4DT/

Answer 4

Я хочу форму (вход), чтобы загрузить первый (и пользователи, чтобы иметь возможность написать раньше), потому что изображения не важно , Я хочу, чтобы загрузить в конце (после того, как все HTML, CSS и JS нагрузок)

Ok, прежде всего позвольте мне сказать, что это только справедливо для всех новый браузер до приблизительно от IE6 я думаю (не уверен, когда именно), но это все равно должно быть подавляющим большинством.

Ниже вы можете увидеть изображение типичной загрузки страницы, содержащей html (первая строка - html, вторая js, третья и четвертая css и последнее изображение).

Как вы можете видеть, сначала загружается html, так как ему нужно знать, какие js и css необходимо загрузить. Теперь - и это зависит от браузера и блокировки/не блокирования javascript - сам образ иногда загружается параллельно с js/css или загружается после завершения загрузки css и javascript (согласно изображению выше). В любом случае, независимо от того, что решает браузер, это будет наиболее оптимальное решение (например, существует ограничение на количество запросов https, которые большинство браузеров будут выполнять параллельно, что решается протоколом spdy, но это еще одна история).Теперь, взглянув более внимательно на график, вы можете увидеть две строки, одну синюю линию, которая показывает, когда страница отображается пользователю (с формой, но без изображения) и зеленой линией после завершения загрузки DOM (включая образ). Таким образом, браузер уже делает то, что вы хотите. Однако, поскольку между этими двумя точками существует всего около 100 мс, вы, вероятно, не видите это, если только у вас много изображений.

Важно не блокировать загрузку вашей страницы в javascript, которая может ускорить загрузку страницы невероятно (например, загружая most javascript after the page finishes loading, динамически вставляя ее на страницу). В любом случае, любая оптимизация очень важна, если вы посмотрите на водопад загрузки страницы (изображение выше) в Firefox (с firebug и перейдите на вкладку net) или хром (нажмите F12 и перейдите на вкладку сети), показывая, что загружается, когда и пытается заставить синюю линию перемещаться как можно больше влево.

Answer 5

Попробуйте это:

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

Answer 6

Еще один один:

Try This

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> 

Ja vaScript:

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 
}