Обработчик события .load(). Толстеет объект Event

BuPy7 · Регистрация: 01.12.2011

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

Пишу галерею. Нужно выполнят функцию, после полной загрузки картинки. Вставляю эту функцию в событие .load() и наблюдаю следующее: нажал 1 раз - событие сработало 1 раз, нажал 2 раза - событие сработало 2 раза...Это плохо, очень плохо. Как от этого избавится? Что я делаю не так?

Vovan-VE · 26.05.2013, 07:31

Как назначаете, так и работает. Код в студию.

BuPy7 · 26.05.2013, 10:44 **[ТС]**

Вот. Будущая галерея. Чтоб запустить, нужно сделать следующее:

HTML5
1
2
3
4
5
6
7
<div id="my-gallery">
    <img src="pic1">
    <img src="pic2">
</div>
<script type="text/javascript">
    $('#my-gallery').gallery({});
</script>

Vovan-VE · 26.05.2013, 13:28

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

Вставляю эту функцию в событие .load()

А это где?

BuPy7 · 26.05.2013, 15:15 **[ТС]**

В коде. 53 строка, 79 и 91

BuPy7 · 26.05.2013, 15:16 **[ТС]**

Вот код

js

JavaScript
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/**
 *  gallery.js
 */
(function($){
    
    var methods = {
        listImg : [],
        nowImg: 0,
        widthImg: 0,
        widthGallery: 0,
        heigthImg: 0,
        heightGallery: 0,
        speedAnim: 0,
        parentBlock: null,
        
        init : function(obj) { 
            methods.widthGallery = obj.width || 600;
            methods.heightGallery = obj.height || 400;
            methods.speedAnim = obj.speed || 300;
            methods.widthImg = methods.widthGallery - 100;
            methods.heightImg = methods.heightGallery - 40;
            
            
            $(this).width(methods.widthGallery);
            $(this).css('border', '1px solid white');
            
            $(this).find('img').each(function() {
                methods.listImg[methods.listImg.length] = $(this).attr('src');
                $(this).remove();
            });
            
            $(this).append('<div id="container-gallery">');
            methods.parentBlock = $('#container-gallery');
            $(methods.parentBlock).prepend('<div class="preview-img">');
            $(methods.parentBlock).find('.preview-img', methods.parentBlock).css({
                width: methods.widthImg,
                height: methods.heightImg
            });
            $(methods.parentBlock).prepend('<div class="but-back">');
            $('.but-back', methods.parentBlock).click(function(){ methods.backImg(); });
            $(methods.parentBlock).append('<div class="but-next">');
            $('.but-next', methods.parentBlock).click(function(){ methods.nextImg(); });
            $(methods.parentBlock).append('<div class="thumb-img">');
            $('.preview-img', methods.parentBlock).append('<img class="fow-img">');
            $('.preview-img', methods.parentBlock).find('.fow-img').attr({
                src: methods.listImg[methods.nowImg]
            }).css({
                height: methods.heightImg
            });
            $('.but-back', methods.parentBlock).height($('.preview-img', methods.parentBlock).height());
            $('.but-next', methods.parentBlock).height($('.preview-img', methods.parentBlock).height()).css({marginTop: -($('.preview-img', methods.parentBlock).height() + 20)});
            
            $('.preview-img', methods.parentBlock).find('.fow-img').load(function(){ methods.position(); });
        },
        
        position: function() {
            console.log(methods.widthImg);
            if ($('.preview-img', methods.parentBlock).find('.fow-img').width() > (methods.widthImg)) {
                $('.preview-img', methods.parentBlock).find('.fow-img').width(methods.widthImg);
            } else {
                $('.preview-img', methods.parentBlock).find('.fow-img').width('auto');
            }
            $('.preview-img', methods.parentBlock).find('.fow-img').css({
                marginLeft: ($('.preview-img', methods.parentBlock).width() - $('.preview-img', methods.parentBlock).find('.fow-img').width()) / 2,
                marginTop: ($('.preview-img', methods.parentBlock).height() - $('.preview-img', methods.parentBlock).find('.fow-img').height()) / 2,
                display: 'block'
            });
        },
        
        nextImg: function() {
            if (methods.nowImg == methods.listImg.length - 1) {
                methods.nowImg = 0;
                console.log(methods.nowImg);
            } else {
                methods.nowImg += 1;
                console.log(methods.nowImg);
            }
            $('.preview-img', methods.parentBlock).find('.fow-img').attr({src: methods.listImg[methods.nowImg]});
            $('.preview-img', methods.parentBlock).find('.fow-img').load(function(){ console.log('yes'); });
        },
        
        backImg: function() {
            if (methods.nowImg == 0) {
                methods.nowImg = methods.listImg.length - 1;
                console.log(methods.nowImg);
            } else {
                methods.nowImg -= 1;
                console.log(methods.nowImg);
            }
            $('.preview-img', methods.parentBlock).find('.fow-img').attr({src: methods.listImg[methods.nowImg]});
            $('.preview-img', methods.parentBlock).find('.fow-img').load(function(){ methods.position(); });
        }
    };
 
    $.fn.gallery = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || ! method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Метод с именем ' +  method + ' не существует');
        } 
    };
 
})(jQuery)

css

CSS
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
/*
 * gallery plagin style
 */
#container-gallery {
}
 
#container-gallery .but-back {
    cursor: pointer;
    width: 50px;
    float: left;
}
 
#container-gallery .preview-img {
    margin: 20px 50px;
}
 
#container-gallery .preview-img .fow-img {
 
}
 
#container-gallery .but-next{
    cursor: pointer;
    width: 50px;
    float: right;
}
 
#container-gallery  .thumb-img {
    height: 80px;
    float: both;
    border: 1px solid white;
}

Vovan-VE · 26.05.2013, 15:25

Так Вы каждый раз назначаете в обработчик onload +еще одну новую функцию. Такуюу же, он новую. И все предыдущие там же хламятся.

BuPy7 · 26.05.2013, 16:18 **[ТС]**

Vovan-VE, действительно. Что-то лоханулся. Спасибо! Исправил =)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

BuPy7 Нет ТЗ - давай досвидания 746 / 377 / 64 Регистрация: 01.12.2011 Сообщений: 2,250 Записей в блоге: 6

	Обработчик события .load(). Толстеет объект Event 25.05.2013, 23:06. Показов 849. Ответов 7 Метки нет (Все метки) Пишу галерею. Нужно выполнят функцию, после полной загрузки картинки. Вставляю эту функцию в событие .load() и наблюдаю следующее: нажал 1 раз - событие сработало 1 раз, нажал 2 раза - событие сработало 2 раза...Это плохо, очень плохо. Как от этого избавится? Что я делаю не так? Миниатюры 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	26.05.2013, 07:31
	Как назначаете, так и работает. Код в студию. 0

BuPy7 Нет ТЗ - давай досвидания 746 / 377 / 64 Регистрация: 01.12.2011 Сообщений: 2,250 Записей в блоге: 6
	26.05.2013, 15:15 [ТС]
	В коде. 53 строка, 79 и 91 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	26.05.2013, 15:25
	Так Вы каждый раз назначаете в обработчик onload +еще одну новую функцию. Такуюу же, он новую. И все предыдущие там же хламятся. 0

BuPy7 Нет ТЗ - давай досвидания 746 / 377 / 64 Регистрация: 01.12.2011 Сообщений: 2,250 Записей в блоге: 6
	26.05.2013, 16:18 [ТС]
	Vovan-VE, действительно. Что-то лоханулся. Спасибо! Исправил =) 0