CODEWITHSUNDEEP
javascriptcsshtmldynamic
user200261
user200261

Reputation: 33

Loading Images into Div Dynamically

I have a list of profile images which appear in a "menu drop down" div which is initially hidden via CSS. I would like to load these images dynamically (as a list) when each menu item is selected, so as to reduce the page loading time. How is this possible?

Upvotes: 3

Views: 18545

Answers (4)

Nevin
Nevin

Reputation: 205

Try to use:

$("#divID").html("<img  style='position:absolute' src='path/to/the/ajax_loader.gif'>");

If you using ajax:

    function sendAjax()
    {
        $("#divID").html("<img  style='position:absolute' src='path/to/the/ajax_loader.gif'>");

         // you ajax code

        $("#divID").html(ajaxResponse);
    }

you can also use document.getElementById('divID').innerHTML instead of $("#divID").html(). its also work fine

If you use this method, doesn't need to hide the div using css. its automatically remove after the ajax response.

Upvotes: 3

Hussain Akhtar Wahid &#39;Ghouri&#39;
Hussain Akhtar Wahid &#39;Ghouri&#39;

Reputation: 6617

Well, you can try this:

<div id="desiredDiv">
</div>
<script>
var images = [
    'http://www.example.com/img/image1.png',
    'http://www.example.com/img/image2.png',
    'http://www.example.com/img/image3.png',
    ...
];
for(var i=0; i<images.length; i++) {
    $('#desiredDiv').append('<img src="'+images[i]+'" alt="" />');
}
</script>

Upvotes: 1

Mouad Debbar
Mouad Debbar

Reputation: 3226

You can keep the list of images in a JavaScript variable:

var images = [
    'http://www.example.com/img/image1.png',
    'http://www.example.com/img/image2.png',
    'http://www.example.com/img/image3.png',
    ...
];

Then you can load the image whenever you need by creating the image tag:

var i = 0; // the index of the image in the list
var $img = $( '<img>' ).attr({'src':images[i]});

Just append the image to your div and it will be loaded automatically by the browser.

Upvotes: 0

Doug
Doug

Reputation: 1028

In your HTML leave out the src attribute on each image tag. Instead, add an attribute called data-src and give it the image url.

Then, when the menu is displayed, run the following script:

$('.menu-class img').each(function() {
    $(this).attr('src', $(this).data('src'));
});

Said script requires jquery if you don't already have it

Upvotes: 0

Related Questions