Question

我在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 +
    "'>";
 }

// ...这里有更多数据库代码......

<body onload="loaded()">

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

当从数据库生成图像时，如何使iScroll5工作？我在两个页面上都使用相同的CSS和iScroll JS。（iScroll4与上面的iScroll 5有同样的问题。）我正在使用SQLite DB插件（来自http://iphonedevlog.wordpress.com/2014/04/07/installing-chris-brodys-sqlite-database-with-cordova-cli-android/，这是我自己的网站）。

Answer 1

尝试在滚动条上调用refresh以使其识别DOM更改。

最好将其包裹在0延迟setTimeout中，就像这样（从http://iscrolljs.com/#refresh偷走）：

setTimeout(function () { myScroll.refresh(); }, 0);

如果需要时间来加载图像，除非您事先了解尺寸，否则您需要等到它完全加载。

Answer 2

在处理动态加载的图像时，事情会变得复杂一些。原因是只有当图像本身已经完全加载时（而且当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);
}

Answer 3

为什么视口用户可扩展的道具在每个样本上都不同？ works = no，broken = yes 只是观察。

Answer 4

fwiw，这里有几点需要研究：

取消注释deviceReady addListener，因为Cordova init确实依赖于此。
你的loaded（）方法为myScroll分配一个新的iScroll，然后显式调用onDeviceReady（），然后声明var myScroll; - 这似乎有问题 - 重做这件事。
如果1＆amp; 2没有帮助，那我建议移动queryDB（tx）;从populateDB（）到successCB（）并注释掉myScroll.refresh（）

只是一个注释，我发现在尝试追踪似乎正在解雇事件或时间问题的症状时，使用警报比使用警报更少侵入。

从数据库生成映像时，如何使iScroll5正常工作？

4 个答案: