Показать сообщение отдельно
  #10 (permalink)  
Старый 08.08.2018, 20:02
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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

function template(data) {
    if(data) {
        var imagePromises = (data.img || []).map(function(src) {
            var html = `
                <div class="chat__list-box-img chat__list-box-img_file">
                    <img class="chat__list-img" src="/img/${src}" role="presentation">
                </div>
            `;

            return new Promise(function(resolve) {
                var image = new Image();
                image.src = "/img/" + src;
                image.onload = image.onerror = function() {
                    resolve(html);
                };
            });
        });

        var time = moment.unix(data.timestamp).format('hh:mm');

        return Promise.all(imagePromises).then(function(html) {
            var img = html.join("");

            return `
                <div class="chat__list-item" data-id="${data.id}">
                    <div class="chat__list-col chat__list-col_1">
                        <div class="chat__list-box-img chat__list-box-img_user">
                            <img class="chat__list-img" src="/img/${data.imgAvatar}" alt="" role="presentation">
                        </div>
                    </div>
                    <div class="chat__list-col chat__list-col_2">
                        <div class="chat__list-row chat__list-row_1">
                            <div class="chat__list-name">${data.name}</div>
                            <div class="chat__list-time">${time}</div>
                        </div>
                        <div class="chat__list-row chat__list-row_2">
                            <div class="chat__list-text ${data.status == 'true' ? '' : 'chat__list-text_error'}">
                                ${data.status == 'true' ? data.text : 'Error'}
                            </div>
                            ${img}
                        </div>
                    </div>
                </div>
            `;
        });
    } else {
        return Promise.reject(new Error("No data"));
    }
}


вот так вызывал

template({
    "id":"250",
    "status":"true",
    "imgAvatar": "avatar_client.png",
    "name": "0",
    "timestamp": "1533568371",
    "text": "122 abc",
    "img": ["uploads/KzejvJellyfish.jpg"]
}).then(function(html) {
     document.getElementById('chat__list-out').insertAdjacentHTML("beforeEnd", html);
     $('#chat__list').scrollTop($('#chat__list-out').height());
});

Последний раз редактировалось Malleys, 08.08.2018 в 20:06.
Ответить с цитированием