javascript - 为什么我的js只有在页面刷新时才能正常工作？

Question

不知道为什么会发生这种情况，Google 只提出与 AJAX 有关的内容。该脚本将图像随机放置在窗口边界内。当我加载页面时，图像是随机放置的，但不在窗口边界内，当我刷新页面时，它们是......有人有什么想法吗？

这是我的代码:

$(document).ready(function() {
    // Randomly place CMYK images on contact page
        function randomFromTo(from, to){
            return Math.floor(Math.random() * (to - from + 1) + from);
        }

        function moveRandom(obj) {
            // Get window data
                var wPos = $('body').offset();
                var wWidth = $('body').width();
                var wHeight = $('body').height();

            // Get moveable element size
                var eWidth = obj.width();
                var eHeight = obj.height();

            // Maximum and minimum positions
                var maxX = wPos.left + wWidth - eWidth;
                var maxY = wPos.top + wHeight - eHeight;
                var minX = wPos.left;
                var minY = wPos.top;

            // Set new position
                var newX = randomFromTo(minX, maxX);
                var newY = randomFromTo(minY, maxY);

                obj.css({
                    'position' : 'absolute',
                    'z-index' : '0',
                    'left' : newX,
                    'top' : newY
                });
        }

        $('.selfie img').each(function() {
            moveRandom($(this));
        });
});

Answer 1

我的猜测是您正在检查文档准备就绪时的图像宽度和高度，这并不能保证图像已加载。第一次加载后，它们会被缓存，所以你很幸运它们已经准备好了。

尝试将 $(document).ready 更改为 $(window).load 以确保加载图像。