Databases
StackOverflow2013
Postsdbo
POFast way to append large list to dom
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFast way to append large list to dom
    primarykey
    data
    text
    <p>I am trying to populate an empty list using an array of photo names. I have made this work already, but with a large amount of photos it can become relatively slow. More than 500 photos is not unusual.</p> <p>I am wondering if someone could find a way to make this code work faster, or tell me what make this code run slow so I can have another look at it myself.</p> <p>The code I have is as follows. this.photoListElement is a jQuery object referring to the unordered list element. photoNames is an array of photo name strings. Variables are declared at the top of the function which is not shown here. isThumbDownloaded checks a variable in an object. getThumb and getThumbId are functions which add some strings together.</p> <pre><code>(...) place = []; for(i=0; i&lt; photoNames.length; ++i) { photoName = photoNames[i]; if(coverages.isThumbDownloaded(coverageId, photoName)){ // A function which checks if a photo is downloaded. If it is, the photo should not be hidden, and the right background should be applied. bg = 'background-image:url(\''+coverages.getThumb(coverageId, photoName) + '?' + new Date().getTime()+'\');'; cls = ''; } else { bg = ''; cls = 'hidden'; } place[i] = '&lt;div id="'+ this.getThumbId(photoName) +'" photoName="'+photoName+'" style="'+bg+'" class="phoPhoto '+cls+'" onclick="$.mobile.changePage($(\'#carousel\'), {transition: \'slidefade\'})"&gt;&lt;/div&gt;'; } this.photoListElement.html(place.join('')); (...) </code></pre> <p>Help is very much appreciated.</p> <p><strong>After research</strong></p> <p>The problem is not the loop, although some minor optimizations can be done, but the the dom insertion.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAart Stuurman
    1. USAart Stuurman
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI'm not using strict mode in this function. Would that make a difference at all?
      singulars
      1. POFast way to append large list to dom
      1. USAart Stuurman
    2. COLoading 500 image files just is slow. Do you really think you need to do this?
      singulars
      1. POFast way to append large list to dom
      1. USBergi
    3. COWhat is `coverages.isThumbDownloaded` supposed to do if you're using a cachebuster right after it?
      singulars
      1. POFast way to append large list to dom
      1. USBergi
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload