Константин Громов

Пример как работать с элементами фрейма. Если же фрейм подгружается по src, то доступ к его window будет лишь в случае совпадения протокола, порта и домена с основным окном. Это обусловлено политикой безопасности браузера.

К подсказке браузера при наведении обращаться нельзя. По сути она тоже формируется из href, хоть и независимо от присутствия во фрейме.

Баги jQuery, либо особенности его поведения. В нативном виде всё предсказуемо.

Набросок: jsfiddle.net/0hwrb4he. Надо ещё доработать функцию updatePrimaryDirection, чтобы правильно работала с вертикально-ориентированными изображениями; проверить как работает в IE9; обработать ситуацию когда пропорции контейнера и изображения почти равны и анимация становится очень дёрганной, и подобные мелочи.

Для перевода в html вам всё-равно придётся добавлять все элементы в один контейнер, чтобы брать его innerHTML. То есть вы будете делать ту же самую вставку, разве что в памяти, плюс вставка уже самого текста в dom, из которого потом браузер по новой будет создавать объектное представление элементов. Слишком много мусора получается.

Как вариант решения, можно саму вставку проводить нативными средствами. jsfiddle.net/bpd7b1dx тут наглядно видна разница в скорости.

Насчёт documentFragment'а сказать ничего не могу, читал лишь, что в современных браузерах он особой пользы не несёт, но в таком же тесте на 1000 элементов был прирост на ~20% в сравнении с обычной нативной вставкой.

Без jQuery, изменяя текущую таблицу. Пример: jsfiddle.net/shLc292n.

function mergeCells(table) {
  var head = table.rows[0],
      body = table.rows[1],
      resultHead = "",
      resultBody = "",
      matches = {};

  for (var i = 0; i < body.cells.length; i++) {
    var headCellText = head.cells[i].textContent,
        bodyCellText = body.cells[i].textContent,
        match = matches[bodyCellText] || (matches[bodyCellText] = []);

    match.push(headCellText);
  }

  for (var key in matches) {
    var match = matches[key],
        from = match[0],
        to = match[match.length - 1];

    if (match.length > 1) {
      resultHead += "<td>" + from + "-" + to + "</td>";
    } else {
      resultHead += "<td>" + from + "</td>";
    }

    resultBody += "<td>" + key + "</td>";
  }

  head.innerHTML = resultHead;
  body.innerHTML = resultBody;
}

jsfiddle.net/vcqv0Lt5 Так выглядит, если делать через обычный фокус.

jsfiddle.net/ouka4f3b

Без jQuery, регулярок и для href именно такого формата. Стоит заметить, что result возвращает строку.

Упрощённый пример jsfiddle.net/xe38nwa0:

• Убран div вокруг submit'а. Он не имел смысла, и теперь вся кнопка кликабельна, а не только изображение внутри.
  
• Вся анимация происходит с помощью css.
  
• Javascript реализован без focusin/focusout. С ними бы получилось немного лучше, но я так и не нашёл информации о совместимости свойства event.relatedTarget у этих событий, без которого идей не было.
  

На первой странице сохраняете название города:

localStorage.setItem("city", cityName);

И на странице контактов исходя из этого значения выводите контент:

switch (localStorage.getItem("city")) {
  case "Москва": 
    /* ... */;
    break;
  case "Санкт-Петербург": 
    /* ... */;
    break;
}

Это очень упрощённый пример и может вам будет уместней использовать sessionStorage. Ну и стоит заметить, что подобные вещи лучше организовывать на сервере похожим образом с помощью cookie.

jsfiddle.net/gbag764n

Ваш код лишь с изменённым фоном. Работает. Исходя из этого можно сказать, что в скрипте есть ошибка, которая прерывает выполнение не дойдя до данной строки. Может быть не подключен jQuery, просмотр консоли, вероятно, сразу даст ответ. Ещё возможно, что вы объявляете $(window).on('load', function() { /* ... */ }) внутри такого же onload или же похожая ситуация, когда вы ставите обработчик на onload, который уже прошёл.

Ну и немного занудства: если стоит position: absolute/fixed или float: left/right, то display: block ставится автоматом. И код со спиннером можно переписать наглядней с callback'ом:

$spinner.fadeOut(350, function() {
  $preloader.fadeOut('slow');
});

Предзагрузка в JS выглядит таким образом:

var image = new Image();

image.src = "image.jpg";

Если не требуется сохранять изображение в памяти, то можно сократить до одной строки:

new Image().src = "image.jpg";

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

function preloadImages() {
  for (var i = 0; i < arguments.length; i++) {
    new Image().src = arguments[i];
  }
}

preloadImages(
  "images-1.jpg",
  "images-2.jpg",
  "images-3.jpg"
);