Question

我的网站看起来像这样：

（警告：服务器上的AngularJS站点未设置为正确提供 - 您需要直接返回http://illandril.net/outer.html而不是使用浏览器重新加载。）

我似乎有两个相互矛盾的要求......

在小屏幕（或在狭窄的浏览器窗口中）查看时，图像需要缩小
有一个链接可以将用户带到已经向下滚动到“HEADER”部分的页面

我对＃1的解决方案很简单......

img {
  max-width: 100%;
}

但向下滚动到HEADER区域不起作用，因为浏览器不知道任何图像的高度（至少不在第一个视图上）。 “简单”，我想......我为所有图像添加了宽度和高度属性。

不幸的是，这使得图像在狭窄的屏幕上被挤压。所以我更多地调整我的CSS ...

img {
  max-width: 100%;
  height: auto;
}

修复了压扁的图像问题，但现在浏览器不知道图像的高度，并在页面加载时滚动到错误的区域。

有什么方法我不知道告诉浏览器图像太宽而无法容纳在容器中应缩小，但是具有已知的宽高比，因此图像占位符在图像加载之前都是正确的尺寸？

如果它是普通页面，使用window.onload来触发滚动会起作用（参见http://jsfiddle.net/nbS3F/1/），因为等待加载所有图像...但是我正在处理的网站是一个使用AngularJS的单页面应用程序，因此在这些新图像开始加载时，load事件早已被触发。

Answer 1

你必须做错的滚动。使用：

element.scrollIntoView(true);

使用：

img {
    max-width: 100%;
}

Fiddle

没有＆＃34;我希望最大宽度为100％，但最大宽度不是100％＆＃34;。

Answer 2

我建议你使用css3和响应式主题技术，你必须通过应用在每个屏幕尺寸中使用不同的参数：

@media only screen and

使用jquery插件搜索谷歌的响应主题，这将帮助您以专业的方式设计您的网站。

Answer 3

我找到了一个解决方案（虽然我更喜欢一个更好的解决方案，如果有人有一个）...手动检查每个图像以查看它是否已加载，并收听onload和onerror事件尚未准备好的图像，仅在所有图像加载或失败后滚动。

var target = document.getElementById(targetID);
if (target) {
    var scroll = function() {
        target.scrollIntoView();
    };
    var toLoad = 0;
    var onload = function() {
        toLoad--;
        if (toLoad === 0) {
            scroll();
        } else {
            console.log('Waiting on ' + toLoad + ' images');
        }
     };
     var images = document.querySelectorAll('img');
     for (var i = 0; i < images.length; i++) {
         if (!images[i].complete) {
             toLoad++;
             images[i].onload = onload;
             images[i].onerror = onload;
         }
     }
     if (toLoad === 0) {
         scroll();
     }
 }

在不破坏锚点滚动的情况下动态缩放图像

3 个答案: