Прокрутка к элементу при загрузке страницы

@Vicont · Регистрация: 31.08.2010

Студворк — интернет-сервис помощи студентам

День добрый! Такой вопрос - при загрузке страницы нужно прокрутить ее к нужному элементу (id="target")
На примере:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
....
....
<img ="" style="height: auto">
<img ="" style="height: auto">
....
....
 
<div id="target">
 
</div>
 
....
....

Проблема в следующем: изображения по высоте не фиксированы, кол-во их тоже разное - из-за всего этого метод

JavaScript
1
$('#target').offset().top

возвращает не верную высоту для прокрутки т.к. изображения еще не успевают подгрузиться и высота их не учитывается. Кто-нибудь сталкивался с такой проблемой?

Как вариант, рассматривал повесить на все изображения обработчик события onload и после загрузки последнего изображения делать прокрутку - но! метод не стабильный, события onload могут срабатывать и раньше чем загрузиться изображение (из кеша), либо попросту не произойдет из-за ошибки загрузки.

@Thisman · 25.07.2014, 12:31

Vicont, может все изображения запихнуть в контейнер, и считать по нему, либо делать все по окончанию загрузки всего документа, именно всего документа, а не всех картинок, или если вариант с оберткой-родителем, то там уже без разницы, можно выставить им минимальную высоту, и тем самым иметь изначально уже работающий скрипт

@Vicont · 25.07.2014, 12:46 **[ТС]**

Thisman,

Сообщение от Thisman

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

Это как? даже если я оберну все в контейнер - пока изображения не загрузятся - контейнер все равно не будет имень актуальную высоту.

Сообщение от Thisman

либо делать все по окончанию загрузки всего документа

А как это мне поможет? При загрузке всего документа - изображения все не подгрузятся.

Сообщение от Thisman

можно выставить им минимальную высоту

Каким образон мы будет иметь работающий скрипт? приблизительно делать прокрутку? такое не подходит)

@Thisman · 25.07.2014, 12:53

Vicont, поставь каждому контейнеру минимальную высоту.
Событие onload на документе срабатывает, когда загружен ВЕСЬ контент, включая все картинки, и прочие вещи

@Vicont · 25.07.2014, 15:47 **[ТС]**

Сообщение от Thisman

поставь каждому контейнеру минимальную высоту.

Ну этим проблему не решить, скажем минимальная высота 500px, а на деле выйдет 700px, погрешность при прокрутке выйдет в 200px.

А вот про load объекта window думал что аналог ready события документа. Потестировал код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="UTF-8">
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            $(window).load(function () {
                console.log('load');
                console.log($('body').height());
            });
            $(document).ready(function(){
                console.log('ready');
            });
        
        </script>
    </head>
    <body>
        <img src="http://yandex.ru/images/today?size=1920x1080" alt="">
        <img src="http://img12.nnm.ru/d/f/a/2/0/3285290137910d1bc9e4739a2ee.jpg">
        <img src="http://imagenes.4ever.eu/data/download/coches-motos/arte/[imagenes.4ever.eu]%20rolls%20royce,%20veterano%20172387.jpg">
        <img src="http://pazitiff.info/uploads/posts/2010-06/1277482685_-_rrirrrrrs_rrsryorr.jpg">
        <img src="http://rewalls.com/pic/201102/2560x1440/reWalls.com-20947.jpg">
        <img src="http://www.wallpaperup.com/uploads/wallpapers/2013/01/20/30483/f17716ad5de728edd0b44ec28c7aa525.jpg">
        <img src="http://www.wallon.ru/_ph/4/428713355.jpg">
        <img src="http://proxy11.media.online.ua/photo/r3-2fdcd6b747/763729_0.jpg7">
        <img src="http://s017.***********/i405/1308/2f/3e12fb15c5e3.jpg">
        <video width="320" height="240" controls>
          <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <br>
        <video width="320" height="240" controls>
          <source src="http://www.leanbackplayer.com/videos/360p/elephants_dream_640x360_2.30.mp4" type="video/mp4">
        </video>  
    </body>
</html>

Выходит действительно событие

JavaScript
1
$(window).load

срабатывает после загрузки всего содержимого) Спасибо за ответ!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	25.07.2014, 12:31
	Vicont, может все изображения запихнуть в контейнер, и считать по нему, либо делать все по окончанию загрузки всего документа, именно всего документа, а не всех картинок, или если вариант с оберткой-родителем, то там уже без разницы, можно выставить им минимальную высоту, и тем самым иметь изначально уже работающий скрипт 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	25.07.2014, 12:53
	Vicont, поставь каждому контейнеру минимальную высоту. Событие onload на документе срабатывает, когда загружен ВЕСЬ контент, включая все картинки, и прочие вещи 1

Опции темы