如何防止图像加载到 jquery 移动设备的所有页面中

Question

我希望图像出现在我 window/screen 的不同位置，所以我使用了这个功能：

function im2(a,b,c,d){
 var x = document.createElement("IMG");
  x.setAttribute("src", a); 
  x.setAttribute("style",b)
  x.setAttribute("width", c);
  x.setAttribute("height",d );
  document.body.appendChild(x);
}

所以我在需要的时候调用图片如下

im2("js/image2.jpg","position: fixed; top:210px ; left:165px","280","35")

等...

它在网络上运行良好（没有 jqm），在移动应用程序中也运行良好但是...

我正在使用 jQuery 移动设备 (1.4.5)，图像加载到我拥有的 3 个页面中（我只需要中间页面 (page2)）。为什么？我不确定是刷卡问题还是加载问题。

我的页面代码是

 <div data-role="page" id="article3"><!--page3-->
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
      <h1>data table</h1>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
      <h1><-- Back </h1>
    </div>
    <div data-role="content">
      <p>3/3</p>
 ---content---

</div> </div>

我的刷卡密码是：

$(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="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) { 
            $.mobile.changePage(nextpage, {transition: "slide", 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="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

我试过了，没用：

$('img').on('dragstart', function(event) {event.preventDefault(); });

或者这个，同样的，图像仍然出现在所有页面上。

$(document).on('swipeleft swiperight', '.selector', function(event) {
 event.stopPropagation();
 event.preventDefault();
});

所以可能是我没有将这些代码行放在正确的位置，或者可能与滑动无关。我找不到任何解决方案，所以我在这里寻求帮助。谢谢

Answer 1

我认为你把它复杂化了。如果你想把动态创建的图像放到特定的元素上，你可以改变这一行： document.body.appendChild(x); 至此： document.querySelector('#article2').appendChild(x);

但这会破坏创建者，因此您可以通过第 5 个参数来决定要放置动态创建的图像的位置：

function im2(a,b,c,d,e){
 var x = document.createElement("IMG");
  x.setAttribute("src", a); 
  x.setAttribute("style",b)
  x.setAttribute("width", c);
  x.setAttribute("height",d );
  // this append the image on the body element
  //document.body.appendChild(x);
  //this however will append it on specify id:
  document.querySelector('#'+e).appendChild(x);
}

然后你这样称呼它：

im2("js/image2.jpg","position: fixed; top:210px ; left:165px","280","35",'article2');

如何防止图像加载到 jquery 移动设备的所有页面中

how to prevent image to load in all pages with jquery mobile

javascript

jquery

jquery-mobile