Question

我目前正在修改smoothDivScroll jquery插件，我发现它在Chrome和Safari中存在问题。

经过大量的Google搜索和StackOverflow搜索后，我可以将此归因于Chrome和Safari中图像尺寸计算方式的问题。

问题是，在chrome和Safari中，图像在滚动条中显示时尚未显示，并且滚动条的整体宽度无法在这些浏览器中解决并生成一系列空白区域。

我得出的结论是，图像需要预先加载，才能计算出尺寸。

以下是有问题的代码：

// Add up the total width of all the items inside the scrollable area
el.data("scrollableArea").children(o.countOnlyClass).each(function () {
    // Check to see if the current element in the loop is the one where the scrolling should start
    if ($(this).is('img')) {

        if ((o.startAtElementId.length !== 0) && (($(this).attr("id")) === o.startAtElementId)) {
            el.data("startingPosition", tempScrollableAreaWidth);
            foundStartAtElement = true;
        }
        var ow = $(this).outerWidth(true);

        if (ow == 0) ow = 1 * $(this).find("img").attr("width");

        el.data("allImages").each(function () {
            var ths = $(this);
            var kx = eh / 1 * ths.attr("height");
            ths.attr({
                width: kx / ths.attr("width"),
                height: eh
            })
        })
        //tempScrollableAreaWidth +" "+ $(this).outerWidth(true) + " "
        tempScrollableAreaWidth = tempScrollableAreaWidth + ow;

    }
});

我尝试在此脚本运行之前从外部预加载图像，但chrome和safari只会偶尔运行它们，预装的图像似乎永远不会出现。

我想知道是否有人可以告诉我如何在这个脚本中预先加载这些图像，以便通过最后处理的计算tempScrollableAreaWidth来访问图像尺寸。

Answer 1

在该功能刷新中使用image onload功能或创建滚动条。

滚动条的图像预加载存在chrome和webkit的问题

1 个答案: