title: how to prevent image to load in all pages with jquery mobile
body: <p>I want images to appear in different spots of my window/screen so I have used this function:</p>
  <pre><code>function im2(a,b,c,d){
   var x = document.createElement(&quot;IMG&quot;);
    x.setAttribute(&quot;src&quot;, a); 
    x.setAttribute(&quot;style&quot;,b)
    x.setAttribute(&quot;width&quot;, c);
    x.setAttribute(&quot;height&quot;,d );
    document.body.appendChild(x);
  }
  </code></pre>
  <p>So I call the images as follow when needed</p>
  <pre><code>im2(&quot;js/image2.jpg&quot;,&quot;position: fixed; top:210px ; left:165px&quot;,&quot;280&quot;,&quot;35&quot;)
  </code></pre>
  <p>etc...</p>
  <p>It works fine on web (without jqm), in the mobile app as well BUT ...</p>
  <p>I am using jQuery mobile (1.4.5) and the images are loaded in the 3 pages I have (I just need the middle page(page2)). Why?
  I am not sure to differentiate if it is a swipe issue or a loading disfunction.</p>
  <p>My pages code is</p>
  <pre><code> &lt;div data-role=&quot;page&quot; id=&quot;article3&quot;&gt;&lt;!--page3--&gt;
      &lt;div data-role=&quot;header&quot; data-theme=&quot;b&quot; data-position=&quot;fixed&quot; data-id=&quot;footer&quot;&gt;
        &lt;a href=&quot;#article1&quot; data-icon=&quot;home&quot; data-iconpos=&quot;notext&quot;&gt;Home&lt;/a&gt;
        &lt;h1&gt;data table&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role=&quot;footer&quot; data-theme=&quot;b&quot; data-position=&quot;fixed&quot; data-id=&quot;footer&quot;&gt;
        &lt;h1&gt;&lt;-- Back &lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role=&quot;content&quot;&gt;
        &lt;p&gt;3/3&lt;/p&gt;
   ---content---
  
  &lt;/div&gt; &lt;/div&gt;
  </code></pre>
  <p>My swipe code is :</p>
  <pre><code>$(document).on('swipeleft', '.ui-page', function(event){    
      if(event.handled !== true) // This will prevent event triggering more then once
      {    
          var nextpage = $.mobile.activePage.next('[data-role=&quot;page&quot;]');
          // swipe using id of next page if exists
          if (nextpage.length &gt; 0) { 
              $.mobile.changePage(nextpage, {transition: &quot;slide&quot;, reverse: false}, true, true);
          }
          event.handled = true;
      }
      return false;         
  });
  
  $(document).on('swiperight', '.ui-page', function(event){     
      if(event.handled !== true) // This will prevent event triggering more then once
      {      
          var prevpage = $(this).prev('[data-role=&quot;page&quot;]');
          if (prevpage.length &gt; 0) {
              $.mobile.changePage(prevpage, {transition: &quot;slide&quot;, reverse: true}, true, true);
          }
          event.handled = true;
      }
      return false;            
  });
  </code></pre>
  <p>I tried this, didn't work:</p>
  <pre><code>$('img').on('dragstart', function(event) {event.preventDefault(); });
  </code></pre>
  <p>or this, the same, images still appear on all the pages.</p>
  <pre><code>$(document).on('swipeleft swiperight', '.selector', function(event) {
   event.stopPropagation();
   event.preventDefault();
  });
  </code></pre>
  <p>So may be I didn't put these code lines in the right place, or may be there is nothing to do with the swipe.
  I was not able to find any solution so I am asking for help here.
  Thank you</p>