Iscroll4 当从DB生成映像时，如何使iScroll5工作？_Iscroll4

Iscroll4 当从DB生成映像时，如何使iScroll5工作？

Iscroll4 当从DB生成映像时，如何使iScroll5工作？,iscroll4,Iscroll4,我正在PhoneGap项目中使用iScroll5。在索引页面上，用户将单击从数据库生成的一系列缩略图，然后选择的图像ID将写入localstorage，页面将更改，图像ID将从localstorage中提取并显示图像如果我以这种方式直接引用图像而不是从DB中引用图像作为测试，则效果良好： <body onload="loaded()"> <div id='wrapper'><div id='scroller'> <ul><li&g

我正在PhoneGap项目中使用iScroll5。在索引页面上，用户将单击从数据库生成的一系列缩略图，然后选择的图像ID将写入localstorage，页面将更改，图像ID将从localstorage中提取并显示图像

如果我以这种方式直接引用图像而不是从DB中引用图像作为测试，则效果良好：

<body onload="loaded()">

<div id='wrapper'><div id='scroller'>
    <ul><li><a id='output' href='index.html' onclick='returnTo()'></a></li></ul>
</div></div>

<script>
var newWP = document.createElement('img');
newWP.src = '0buggies/0118_buggies/wallpaper-18b2.jpg';
document.getElementById('output').appendChild(newWP);
</script>
</body>

我可以根据我的应用程序所需的主要功能，通过收缩/缩放来调整屏幕上的图像大小，并在X轴和Y轴上滚动图像，然后点击图像后，我将返回到索引页面。所有这些都有效

但是，如果我从数据库中取出图像，并以以下方式引用它，页面代码的所有其他方面都是相同的，收缩/缩放不起作用，尽管会显示图片，并且我可以在X和Y上滚动：

// ... DB code here ...
function querySuccess(tx, results) {
    var path = results.rows.item.category + 
        "/" + results.rows.item.subcat + 
        "/" + results.rows.item.filename_lg;
        document.getElementById("output").innerHTML = "<img src='" + path +
    "'>";
 }

//。。。更多数据库代码在这里。。。

当从DB生成映像时，如何使iScroll5工作？我在两个页面上使用相同的CSS和iScroll JS。iScroll 4与上面的iScroll 5存在相同的问题。我正在使用SQLite DB插件，它是我自己的站点。

尝试在滚动条上调用refresh，让它识别DOM更改

最好用0延迟setTimeout来包装它，就像从 :

setTimeoutfunction{ myScroll.refresh； }, 0;

如果加载图像需要时间，则需要等待图像完全加载，除非事先知道尺寸

处理动态加载的图像时，事情会变得稍微复杂一些。原因是，只有当图像本身已完全加载时，浏览器才知道图像尺寸，而当img标记已添加到DOM时，浏览器才知道图像尺寸

最好是明确声明图像的宽度/高度。你应该这样做：

function querySuccess (results) {
    var path = results.rows.item.category + 
        "/" + results.rows.item.subcat + 
        "/" + results.rows.item.filename_lg;

    var img = document.createElement('img');

    img.width = 100;
    img.height = 100;
    img.src = path;

    document.getElementById('output').appendChild(img);

    // need to refresh iscroll in case the previous img was smaller/bigger than the new one
    iScrollInstance.refresh();
}

如果宽度/高度未知，则可以将图像尺寸保存到数据库中，并与图像路径一起检索它们

function querySuccess (results) {
    var path = results.rows.item.category + 
        "/" + results.rows.item.subcat + 
        "/" + results.rows.item.filename_lg;

    var img = document.createElement('img');

    img.width = results.width;
    img.height = results.height;
    img.src = path;

    document.getElementById('output').appendChild(img);

    // need to refresh iscroll in case the previous img was smaller/bigger than the new one
    iScrollInstance.refresh();
}

如果无法以任何方式计算图像尺寸，则必须等待图像完全加载，此时可以执行iScroll.refresh。大概是这样的：

function querySuccess (results) {
    var path = results.rows.item.category + 
        "/" + results.rows.item.subcat + 
        "/" + results.rows.item.filename_lg;

    var img = document.createElement('img');
    img.onload = function () {
        setTimeout(iScrollInstance.refresh.bind(iScrollInstance), 10); // give 10ms rest
    }
    img.onerror = function () {
        // you may want to deal with error404 or connection errors
    }
    img.src = path;

    document.getElementById('output').appendChild(img);
}

为什么每个示例上的视口用户可缩放道具不同？工作=否，中断=是

只是一个观察。

fwiw，这里有一些事情需要研究：

取消对DeviceRady addListener的注释，因为Cordova init确实依赖于此。加载的方法为myScroll分配一个新的iScroll，然后显式调用OnDevicerady，然后声明var myScroll；-这似乎天生就有问题——重新设计。如果1和2没有帮助，那么我建议移动queryDBtx；从populateDB到successCB，并对myScroll.refresh进行注释

还有一点需要注意的是，我发现，当试图跟踪似乎干扰事件触发或计时问题的症状时，登录到控制台比使用警报更具侵入性。

工作页面要点：非工作数据库页面要点：如果您使用iScroll4实现这一点，我很乐意这样做！令人费解的是，在第一页上点击图像后，第二页上没有触发任何警报。我尝试了您的第一个代码示例，但使用我的图像大小查看更新的要点，但仍然没有收缩/缩放操作，并且我还添加了包装尺寸作为原始图像的大小（以像素为单位）。没有回应。Gist已更新。刷新时间猛增到200。仍然没有收缩/缩放响应。没有，没有区别。我还将超时时间增加到200-没有区别。只是在另外一个区域进行了试验，结果没有区别。我用1和2更新了要点；不工作。我将在3号工作。谢谢使用和不使用myScroll.refresh实现了3。尽管图像显示，但仍然没有收缩/缩放。可能需要添加re:gist rev7 var myScroll；最后一个标签。我很确定这个问题与加载DOM的顺序、初始化iScroll、修改DOM（例如img append）和.refresh有关。在您的工作版本中，这是直接的，与rev7代码不同。试着模仿同样的顺序。给出了rev7代码，在一些数据/文件中硬编码来模拟db调用，看看它是否仍然失败……我怀疑它会失败，因为我认为db调用与此无关。

function querySuccess (results) {
    var path = results.rows.item.category + 
        "/" + results.rows.item.subcat + 
        "/" + results.rows.item.filename_lg;

    var img = document.createElement('img');
    img.onload = function () {
        setTimeout(iScrollInstance.refresh.bind(iScrollInstance), 10); // give 10ms rest
    }
    img.onerror = function () {
        // you may want to deal with error404 or connection errors
    }
    img.src = path;

    document.getElementById('output').appendChild(img);
}