Динамически добавить изображение в середине истории

Question

Я показываю историю на веб-сайте, я хотел бы динамически добавить изображение в историю, как я могу это сделать?

Я не хочу добавлять его в начале или в конце истории, но динамически встраиваю его где-то в середине истории с помощью плавающего элемента влево или вправо.

Я использую PHP и jQuery, и в истории тоже может быть HTML. Если у меня есть такая история, как я могу вставить изображение?

Nullam nibh lorem, aliquam sed sodales Sed, Egestas на пытки. Curabitur коммандо урна нон элит скелериск ак Rutrum Tellus Interdum. Phasellus arcu Лео, спорить с нашими коллегами, pulvinar vitae neque. Сед Темпор Долор Eu Eros Аликет в Эгестас Метус Bibendum. Etiam Eleifend Tellus Vitae Purus Concectetur Eget Venenatis Лигула Курсус. В плато hac привычка dictumst. Нулла в элит эрат. Vestibulum mattis malesuada sapien Quis Sodales. Sed ID Tortor ID Odio Mollis Iaculis ЕС Сем. Morbi pellentesque lorem vitee ante molestie <img src="pathtoimage" style="float:left;"> сит амет пульвинар Lorem Porta. Морис Темпор Лаореет Quam Vel Tristique. Донецкие ультикс porttitor sapien, eu consectetur Мистор Ронкус Эгет. Nulla Vehicleula Великая Ниси. Энеевский концертмейстер Placerat Laoreet. Praesent Blandit quam turpis, non egestas elit. Quisque Долор Турпис, идентификатор элементум сиди амет, содайся у метус. Duis Cortor Neque, Scelerisque A Adisiscing Quis, Blandit Non Velit. Донец Маттис, нибх на Фараетра Порта, Erat Massa Tempor Quam, в Хендрерит сем нибх сит амет магна. Sed Auctor Lectus AC Magna Accumsan Commodo. Nam Vehicleula Velit Et Neque Eleifend Сид amet eleifend leo euismod.

Answer 1

Поскольку история может содержать HTML, проблема может стать очень запутанной.Следующий алгоритм вставит изображение в произвольный процент в историю и убедится, что оно не внутри тега HTML.Обратите внимание, что он жертвует эффективностью ради простоты.

Предупреждение: Этот код может по-прежнему вставлять тег изображения туда, где он не принадлежит, в зависимости от того, какой HTML-код допускает история.Например, если разрешены встроенные теги script ¹ , алгоритм может иметь "забавные" эффекты.;)

См. Живую демонстрацию по адресу: jsbin.com/agimi5/3.

Предположим, история полностью внутри <div id="StoryGoesHere">,Затем вставьте изображение, скажем:

InsertImageInStory ("StoryGoesHere", 30, "F_left", "Image URL");

Дано:

function InsertImageInStory (ContainID, PercentIn, LeftorRightClass, ImageURL)
{
    var storyContainer  = $("#" + ContainID);
    var storyHTML       = storyContainer.html ();
    var storyLen        = storyHTML.length;
    var targetCharPos   = (storyLen * PercentIn) / 100;

    /*--- Now Loop through the story until we reach the target character, WHILE
        making sure it isn't inside an HTML tag.
    */
    for (var J = 0, bInTag = false;  J < storyLen;  ++J)
    {
        if (storyHTML.charAt(J) == '<'  ||  storyHTML.charAt(J) == '>' )
            bInTag              ^= true;    //-- Toggle value.

        if (J < targetCharPos)  continue;

        /*--- We've found/passed the target position.  Insert the image just as soon
            as we are clear of any tags.
        */
        if (!bInTag)
        {
            var newStory    = storyHTML.substr (0, J+1);
            newStory       += '<img src="' + ImageURL + '" class="' + LeftorRightClass + '">';
            newStory       += storyHTML.substr (J+1, storyLen+1);

            storyContainer.html (newStory);
            break;
        }
    }
}

Алгоритм может быть легко преобразован в PHP, если вы предпочитаете выполнять манипуляции на стороне сервера.

---

¹ Если разрешены встроенные теги script, у вас все равно будут большие проблемы.

Answer 2

дать скрытый div где-то посередине истории ... а затем попробуйте это ...

Html:  <div id="divid" float="left">


setTimeout(function() {$("#divid").append('<img src='img.gif'>').show()}, 10000);