Asynchronously load the contents of a div

JavaScript
1

I’m looking for a way to asynchronously load the contents of a whole div. I’d like to delay the loading of everything in the div. Also, assume that each div has an image in it.

2

Since you’re using jQuery, you might have a look at the .load() method… but even if you use it with a selector, the whole page will get parsed and all images will be loaded with the first call. So I suppose the more challenging part would be serving the right content for a given page – it might then look like e.g.

<div class="content"></div>
<ul class="pagination">
  <li data-page="1">foo</li>
  <li data-page="2">bar</li>
  <li data-page="3">baz</li>
</ul>

var $content = $('.content')

$('.pagination').on('click', 'li', function () {
  var page = this.dataset.page

  $content.load('content.php?page=' + page)
})

But this is of course a backend matter. ;-)

1 Like
3

I tried to implement the load() method but like you already said, everything gets loaded with the first call. There has to be a simpler way where other people have already done this.

4

I really think the usual (and cleanest) approach would be a proper backend service… it depends on the amount of data though, I suppose. If you want to do this on the client side, you might parse the AJAX response with a DOMParser – images will only get loaded when they’re actually getting appended to the DOM then. Something like

$.get('content.html', function (data) {
  var parser = new DOMParser()
  var doc  = parser.parseFromString(data, 'text/html')

  // You can now access the content using jQuery like e.g.
  $('.foo', doc).clone().appendTo(document.body)
})
1 Like
5

I got this to work in pure javascript so now it loads asynchronously which is good but there’s another problem that maybe you can help.

When you look at the link below, would it be possible to replace the variable objJson to use the structure that I have in the JQuery example in OP? For example, instead of getting the data from the variable objJson adName: blah blah, get the data from what I have in the JQuery example like below


<div class="article-loop">
  <h3>Article 1</h3>
</div>
<div class="article-loop">
  <h3>Article 2</h3>
</div>
<div class="article-loop">
  <h3>Article 3</h3>
</div>
<div class="article-loop">
  <h3>Article 4</h3>
</div>
<div class="article-loop">
  <h3>Article 5</h3>
</div>

Here it is in javascript.

6

You mean as a plain string? This could be done with a DOM parser as shown above…

PS: Here’s how you could do this with vanillaJS:

var xhr = new XMLHttpRequest()

xhr.addEventListener('load', function () {
  var parser = new DOMParser()

  var doc = parser.parseFromString(
    xhr.responseText, 
    'text/html'
  )

  var articles = doc.querySelectorAll('.article-loop')

  // etc.
}.bind(this))    

xhr.open('GET', 'content.html')
xhr.send()
1 Like
7

Could you please update this with your code because I tried it and it displayed all the divs at once.

To answer your question, if you look at the link above, you will see all the divs (.article-loop) are in the variable objJson. I wanted them to be like how I have them in the OP using JQuery. I want to grab the divs as plain string. I’m a French student in HS so I don’t know if that makes any sense. Thanks for all your help though.

<div class="article-loop">
  <h3>Article 1</h3>
</div>
<div class="article-loop">
  <h3>Article 2</h3>
</div>
<div class="article-loop">
  <h3>Article 3</h3>
</div>
<div class="article-loop">
  <h3>Article 4</h3>
</div>
<div class="article-loop">
  <h3>Article 5</h3>
</div>
8

The pen you’ve linked seems to work properly…?

If it’s in a separate file you can load it with AJAX; by default, the response will be a plain string, which you can then parse and query with jQuery or vanillaJS like in my previous replies.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.