Arhn - архитектура программирования

Обеспечение того, чтобы jQuery выполнялся только после того, как весь PHP был полностью выполнен

У меня есть некоторый код jQuery, который работает вместе с некоторым внешним PHP, но обычно только после второго обновления. Код предназначен для получения размеров каждого изображения в списке и затем он изменяет стиль каждого изображения, чтобы он соответствовал его родительскому элементу в соответствии с его самой длинной стороной. При первой загрузке этой страницы jQuery, похоже, не может определить высоту и ширину всех изображений, поэтому стиль игнорируется. Как лучше всего обеспечить выполнение jQuery ПОСЛЕ полной загрузки изображений, вызванных из PHP?

Сценарий: у меня есть страница, которая вызывает список изображений с помощью внешнего PHP-скрипта. После запуска PHP результаты отображаются как HTML внутри div с идентификатором «txtHint».

Итак, этот PHP (усеченный для актуальности)...

echo "<li><img src='images/".$rowcat['imageurl']. "'><div class='title'>" . $counter . ". " . $rowcat['name'] ."</div></li>";                       
    $counter++;

повторяется в этом div "txtHint":

<div class="featured-scroller">
<ul>
    <div id="txtHint">
            <li><img src="images/012.jpg"><div class="title">1. Eyemouth Museum </div></li>
            <li><img src="images/014.jpg"><div class="title">2. Edinburgh Museum</div></li>
            // and so on...
    </div>
</ul>
</div>

Однако, как только результаты будут возвращены, мне нужно проверить размеры каждого экземпляра изображения и стилизовать его в соответствии с тем, больше ли ширина или высота, сохраняя при этом исходное соотношение сторон.

На данный момент я использую следующий jQuery:

$("#txtHint img").each(function() {
    var imgHeight = $(this).height();
    var imgWidth = $(this).width();

    if(imgHeight > imgWidth)
        {
            $(this).css({'height':'100%', 'width':'auto'});
        }
    else
        {
            $(this).css({'height':'auto', 'width':'100%', 'position':'relative', 'top':'50%', 'margin-top': -imgHeight / 2 + 'px', 'display':'inline-block'});
        }
});

Следует отметить, что внешний PHP-скрипт вызывается из JavaScript в заголовке страницы. Я не уверен, что это имеет значение.

Текущий код работает, но не с первого раза. Я пробовал $(window).load и т. д., а также вызывал его в упомянутом JavaScript, который вызывает PHP-скрипт, но проблема не устранена.

См. следующий JSfiddle для рабочего примера: http://jsfiddle.net/EMPqW/

javascript jquery image-loading onload
13.12.2012

  • Знакомы ли вы с моделью клиент-сервер? 14.12.2012
  • Ваш JavaScript всегда выполняется после того, как страница будет передана в браузер. Это означает, что ваш JS всегда после PHP (за исключением случаев, когда вы выполняете некоторые вызовы AJAX). Попробуйте $(function () { /* здесь ваш код */ }); 14.12.2012
  • Это полностью связано с тем, что размеры изображения доступны только после загрузки каждого изображения. Это не имеет ничего общего с порядком выполнения PHP и javascript. Проблема будет идентична с HTML, закодированным вручную (PHP не задействован). Ответы Джека/эльклана ниже имеют наилучшие шансы на успех. 14.12.2012
  • Спасибо за ваши ответы. Извиняюсь за вопрос немного новичка - я довольно новичок (как вы, наверное, заметили) в обоих языках. Однако, реализуя $(window).load, я обнаружил, что ничего не происходит. 14.12.2012

Ответы:


1

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

Код PHP не имеет значения, потому что PHP всегда будет интерпретироваться перед JavaScript. Сервер выведет HTML, и JS увидит его, но не исходный PHP. Так работает клиент-серверная модель.

Чтобы убедиться, что ваши изображения загружены, прежде чем манипулировать ими, вы можете использовать событие load объекта window.

$(window).load(function(){ //images were loaded });
13.12.2012

2

Вы пробовали

$(document).ready(function(){
//your code here
});
13.12.2012

3

Если вы хотите убедиться, что все изображения загружены, вы можете использовать событие .load():

$(window).load(function() {
    // document and images should have loaded by now.
});
13.12.2012

4

Обычно, если вам нужно проверить, что это изображение полностью загружено (это часто требуется, когда вы визуализируете изображение src в javascript, но выглядит также необходимо в вашем случае) и что-либо еще не помогает, вы можете поместить обработчик load() на изображение перед его обработкой, здесь демо:

$("#txtHint img").each(function() {
    $t = $(this);

    function image_process() {
        var imgHeight = $t.height();
        var imgWidth = $t.width();

        if (imgHeight > imgWidth) {
            $t.css({
                'height': '100%',
                'width': 'auto'
            });
        }
        else {
            $t.css({
                'height': 'auto',
                'width': '100%',
                'position': 'relative',
                'top': '50%',
                'margin-top': -imgHeight / 2 + 'px',
                'display': 'inline-block'
            });
        }
    }
    if (this.complete) {
        image_process()
    } else {
        $t.one('load',image_process);
    }
});​

http://jsfiddle.net/oceog/EMPqW/5/ однако в примере оба $(window).load() и $(document).ready() не использовать этот обработчик.

13.12.2012

5

Прежде чем использовать событие загрузки, которое вам здесь нужно, убедитесь, что вы используете последнюю версию jquery. Более ранние версии не очень хорошо реализовывали это в разных браузерах.

13.12.2012
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..