Как динамически обновлять содержимое div в HTML и поддерживать прежний стиль?

Question

Я создал панель инструментов с помощью Flask (Python), которая отображает изображения, присутствующие в папке на рабочем столе. Теперь эта папка будет обновляться новыми изображениями каждые 5 секунд или около того, и поэтому я хотел бы обновить свой веб-сайт новыми изображениями. Я подумал, что использование Javascript / Jquery AJAX было бы лучше для удобства пользователей. Мне успешно удавалось обновлять свою приборную панель каждые 2 секунды, используя Jquery, как показано в следующем коде.

Однако моя проблема - потеря стиля. Как вы можете видеть на 1-м скриншоте, Jumbotron находится точно внутри внутренней границы. Но на втором изображении вы можете видеть, что вся центральная часть сайта, включая Jumbotron и изображения, немного смещена от центра. Красная маркировка на изображении указывает на сдвиг. Итак, я хотел знать, как я могу предотвратить изменение стиля Jquery. Я хочу, чтобы обновленная страница заменяла предыдущую страницу такой, какая она есть.

Вот мои коды -

Колба routes.py -

@app.route('/image/<im>')
@login_required
def image(im):
    image_src=[im+'/'+i for i in  os.listdir(os.path.join(app.static_folder,im))]
    rows=math.ceil(len(image_src)/3)
    print(image_src)
    return render_template('dashboard.html',title='Welcome',images=image_src,rows=rows,image_date=im)

HTML - dashboard.html

{% extends "base.html" %}
{% block content %}
<hr>
<div class="container dash-container main-body image-area" >
    <div class="row">
        <br>
        <hr >
        <br>
        <div class="col-md-12">
            <div class="jumbotron ">
                <h1 id="hdr">DASHBOARD</h1>
            </div>
        </div> 
    </div>

{% if images %}

<div class="row" id="info">

    <a href="{{ url_for('dashboard') }}"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></a>
</div>
<br><br>
<div class="row">
        <div class="col-md-12" id="info">
            {% set ns = namespace(counter=0) %}
            <table class="table table-hover table-condensed table-bordered images-table" cellspacing="5" cellpadding="5">
                {% for row in range(rows) %}
                <tr class="image-hover">
                    {% for data in range(3) %}
                        {% if ns.counter  < images|length %}
                            <td style="width:10%;">
                                <a href="{{ url_for('display',file=images[ns.counter][10:],folder=images[ns.counter][0:10]) }}"><img src="{{ url_for('static',filename=images[ns.counter]) }}" alt="User Image" width="220" height="220"></a>
                                <br>
                                {% set ns.counter = ns.counter + 1 %}
                            </td>
                        {% endif %}
                    {% endfor %}
                </tr>
                {% endfor %}
            </table>
        </div>
    </div>

{% endif %}


</div>

<script type="text/javascript">
    setInterval(function(){
   $('.image-area').load("{{ url_for('image',im=image_date) }}");
}, 2000)

</script>
{% endblock %}

Файл HTML в основном упорядочивает изображения в строках с максимальным количеством элементов 3 в строке.

CSS - dashboard.css

#info{
    font-size: 23px;
    font-family: 'Saira',sans-serif;
    text-align: center;
    color: black;
}

.dash-container{
    height: 100%;
}
.images-table{ 
    width: auto !important;
    margin-left: 10%;
    margin-right: 10%;
}

.folder-link {
    color:black /*#1cd1ff*/;
    font-size: 30px;
}

table tr.row-hover:hover{
    background-color: #190101;

}
table tr.row-hover:hover .folder-link{
    color:white;
}
table tr.image-hover:hover .folder-link{
    color:black;
}

table tr.row-hover:hover .folder-link:hover{
    color:#00ff83;
}

table.images-table tr.image-hover:hover{
    background-color: black;
}
table.images-table tr.image-hover td:hover{
    background-color: white;
}

Вот изображения. Image 1 - это веб-сайт по умолчанию без javascript, а Image 2 - веб-сайт после ajax вызовов.

Я хочу, чтобы обновленная страница идеально переписывала предыдущее представление и не производила смещения от центра.

Пожалуйста, помогите.

---

РЕДАКТИРОВАТЬ 1:

Я заметил, что если я заменю селектор класса в Jquery на тег 'body', стилизация будет сохранена. Однако, в отличие от предыдущего типа, обновление страницы занимает в 3 раза больше времени.

$('.image-area').load("{{ url_for('image',im=image_date) }}");

изменено на

$('body').load("{{ url_for('image',im=image_date) }}");

Вот мой base.html код -

<!DOCTYPE html>
<html>
<head>
    {{ moment.include_jquery() }}
    {{ moment.include_moment() }}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/base.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/about.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/index.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/dashboard.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/display.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/feedback.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/login.css') }}">

    <link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet">
    {% if title %}
    <title>{{ title }}</title>
    {% else %}
    <title>Welcome_segregator</title>
    {% endif %}
</head>
<body>



    <nav class="navbar navbar-fixed-top  navbar-custom">
    <div class="container" >
    <div class="navbar-header">

            {% if current_user.username %}
            <a class="navbar-brand nav-custom" href="{{ url_for('index') }}" ><span id="header"><span id="logo"><strong>Welcome </strong></span id="header"><strong>{{ current_user.username|striptags }} !</strong></span></a>
            {% else %}
            <a class="navbar-brand nav-custom" href="{{ url_for('index') }}"><span id="header"><span id="logo"><strong>Welcome </strong></span></span></a>
            {% endif %}
    </div>
    <ul class="nav navbar-nav navbar-right " >
            <li class="nav-custom"><a class="nav navbar-nav" href="{{ url_for('index') }}"><span class="glyphicon glyphicon-home "> <span id="header"><strong>Home</strong></span></a></li>
            <li><a class="nav navbar-nav" href="{{ url_for('dashboard') }}"><span class="glyphicon glyphicon-dashboard"> <span id="header"><strong>Dashboard</strong></span></a></li>
            <li><a class="nav navbar-nav" href="{{ url_for('about') }}"><span class="glyphicon glyphicon-user"> <span id="header"><strong>About Us</strong></span></a></li>
            <li><a class="nav navbar-nav" href="{{ url_for('feedback') }}"><span class="glyphicon glyphicon-pencil"> <span id="header"><strong>Feedback</strong></span></a></li>
            {% if current_user.is_anonymous %}
            <li><a class="nav navbar-nav" href="{{ url_for('login') }}"><span class="glyphicon glyphicon-log-in"> <span id="header"><strong>Login</strong></span></a></li>
            {% else %}
            <li><a class="nav navbar-nav" href="{{ url_for('logout') }}"><span class="glyphicon glyphicon-off"> <span id="header"><strong>Logout</strong></span></a></li>
            {% endif %}

    </ul>
      </div>
    </nav>


        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <ul>
            {% for message in messages %}
            <li>{{ message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
        {% endwith %}
        {% block content %}{% endblock %}

</body>
</html>

Answer 1

За мой комментарий выше: я думаю, что ваш текущий вызов $('.image-area').load("{{ url_for('image',im=image_date) }}"); заставляет вас получать вложенные .image-area div.

Попробуйте переключить

{% block content %}{% endblock %}

на

<div id='img-cont'>{% block content %}{% endblock %}</div>

А затем измените свой js на

$('.img-cont').load("{{ url_for('image',im=image_date) }}");