Загрузка изображений в зависимости от размеров экрана.

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

Основная идея алгоритма заключается в следующем: jQuery-метод после построения DOM-структуры страницы отправляет запрос на сервер с указанием ширины экрана. Сервер обрабатывает запрос, подготавливает изображения соответствующего размера и возвращает их в качестве ответа.

Изображения разместим в каталоге /sites/default/files/background. Также предварительно необходимо создать нужные "Стили изображений".

Создадим специальный модуль ajax_module с 3 файлами: ajax_module.info, ajax_module.module и ajax_module_script.js.

ajax_module.info:

name = Ajax Module
description = Loading background images by AJAX
core = 7.x

ajax_module.module:

<?php

/**
 * Implementation of hook_preprocess_page().
 */
function ajax_module_preprocess_page(&$variables) {
    // Добавляем скрипт модуля на страницы сайта
    drupal_add_js(drupal_get_path('module', 'ajax_module') . '/ajax_module_script.js');
}

/**
 * Implementation of hook_menu().
 */
function ajax_module_menu() {
    // Регистрируем в системе меню Drupal путь,
    // по которому будем отправлять запрос из скрипта.
    $items['ajax/get/bg_img'] = array(
        'page callback' => 'ajax_module_get_bg_img',
        'type' => MENU_CALLBACK,
        'access arguments' => array('access content'),
        'delivery callback' => 'ajax_module_callback_bg_img',
    );

    return $items;
}

/**
 * Функция, отвечающая за вывод возвращаемого результата функции ajax_module_get_bg_img()
 */
function ajax_module_callback_bg_img($page_callback_result) {
    print $page_callback_result;
    // Нам нет необходимости загружать всю страницу,
    // выводим только сгенерированные изображения.
    drupal_page_footer();
}

/**
 * Функция возвращает изображения для вывода на страницу
 * в зависимости от размеров экрана.
 * $width - ширина экрана.
 */
function ajax_module_get_bg_img($width) {
    $output = '';
    // Десктоп с большими разрешениями, телевизоры.
    if ($width >= 1382) {
        $images = _get_bg_img("original");
    }
    
    // Планшеты, нетбуки, ноутбуки, десктоп.
    if ($width >= 768 && $width < 1382) {
        $images = _get_bg_img("medium");
    }
    
    // Все, что меньше
    if ($width < 768) {
        $images = _get_bg_img("small");
    }
    
    if (isset($images)) {
        $output = '<div id="images-for-bg">' . $images . '</div>';
    }
    
    return $output;
}

/**
 * Функция возвращает список изображений
 */
function _get_bg_img($mode) {
    // Определяем каталог, в котором расположены исходные изображения
    $img_location = variable_get('file_public_path', conf_path() . '/files') . '/background';
    $imgs = "";

    // Находим все изображения в каталоге
    $files = file_scan_directory($img_location, '/.*\.jpg$/');

    // Проходимся по всем найденным изображениям, определяем URI-путь и генерируем изображение нужного размера.
    // Я использую div-элементы, но можно возвращать и обычные изображения.
    if (is_array($files)) {
        foreach ($files as $entry) {
            // Нам необходим путь относительно корневого каталога файловой системы.
            $file_uri = file_build_uri(str_replace('sites/default/files/', '', $entry->uri));
            switch($mode) {
               case "original":
               {
                    $imgs .= '<div style="background: url(/'.$entry->uri.') no-repeat center center fixed;"></div>';
                    break;
               }
               case "medium":
               {
                    $filepath = image_style_url('medium_bg', $file_uri);
                    $imgs .= '<div style="background: url('.$filepath.') no-repeat center center fixed;></div>';
                    break;
               }
               case "small":
               {
                    $filepath = image_style_url('small_bg', $file_uri);
                    $imgs .= '<div style="background: url('.$filepath.') no-repeat center center fixed;></div>';
                    break;
               }
            }
        }
    }
    
    return $imgs;
}

ajax_module_script.js:

jQuery(function($) {
    /**
     * Загрузка фоновых изображений
     */
    var ajaxLoadBgImg = function() {
        // #backgroundImages - div-элемент, куда будем загружать изображения.
        // screen.width - ширина экрана.
        $('#backgroundImages').load('/ajax/get/bg_img/' + screen.width, function() {
            alert("Изображения загружены");
        });
    }

    $(document).ready(function() {
        ajaxLoadBgImg();
    });
});

Для отправки запроса на сервер используем jQuery-метод .load().

Теги: