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

@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

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

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@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