Question

在我的全响应单页应用程序中，我有一个图像库，最多包含10张图像。对于移动设备，我将使用较小的图像作为background-image，以缩短加载和渲染时间。可以很容易地通过媒体查询来完成。

注意事项：如果用户正在调整浏览器窗口的大小并在媒体查询中，则将从CDN中获取新版本的图像。

这是可以接受的还是您知道更好的解决方案？

Answer 1

听起来像个好计划：）

您还可以使用预取机制来预取较小的图像

    ./container_1524681227186_277084_01_000001/syslog:2018-10-12 08:50:17,542 INFO [IPC Server handler 14 on 37982] org.apache.hadoop.mapred.TaskAttemptListenerImpl: Done acknowledgement from attempt_1524681227186_277084_m_000140_0
./container_1524681227186_277084_01_000001/syslog:2018-10-12 08:50:17,542 INFO [AsyncDispatcher event handler] org.apache.hadoop.mapreduce.v2.app.job.impl.TaskAttemptImpl: attempt_1524681227186_277084_m_000140_0 TaskAttempt Transitioned from RUNNING to SUCCESS_FINISHING_CONTAINER
./container_1524681227186_277084_01_000001/syslog:2018-10-12 08:50:17,542 INFO [AsyncDispatcher event handler] org.apache.hadoop.mapreduce.v2.app.job.impl.TaskImpl: Task succeeded with attempt attempt_1524681227186_277084_m_000140_0
./container_1524681227186_277084_01_000001/syslog:2018-10-12 08:50:17,542 INFO [AsyncDispatcher event handler] org.apache.hadoop.mapreduce.v2.app.job.impl.TaskImpl: task_1524681227186_277084_m_000140 Task Transitioned from RUNNING to SUCCEEDED
./container_1524681227186_277084_01_000001/syslog:2018-10-12 08:50:20,767 INFO [AsyncDispatcher event handler] org.apache.hadoop.mapreduce.v2.app.job.impl.TaskAttemptImpl: attempt_1524681227186_277084_m_000140_0 TaskAttempt Transitioned from SUCCESS_FINISHING_CONTAINER to SUCCEEDED
./container_1524681227186_277084_01_000001/syslog:2018-10-12 08:50:20,767 INFO [AsyncDispatcher event handler] org.apache.hadoop.mapreduce.v2.app.job.impl.TaskAttemptImpl: Diagnostics report from attempt_1524681227186_277084_m_000140_0:
./container_1524681227186_277084_01_000001/syslog:2018-10-12 08:50:20,767 INFO [ContainerLauncher #218] org.apache.hadoop.mapreduce.v2.app.launcher.ContainerLauncherImpl: Processing the event EventType: CONTAINER_COMPLETED for container container_1524681227186_277084_01_000320 taskAttempt attempt_1524681227186_277084_m_000140_0
./container_1524681227186_277084_01_000001/syslog:2018-10-12 11:39:05,003 INFO [AsyncDispatcher event handler] org.apache.hadoop.mapreduce.v2.app.job.impl.JobImpl: TaskAttempt killed because it ran on unusable node dm501.atl2.turn.com:8041. AttemptId:attempt_1524681227186_277084_m_000140_0
./container_1524681227186_277084_01_000001/syslog:2018-10-12 11:39:05,003 INFO [AsyncDispatcher event handler] org.apache.hadoop.mapreduce.v2.app.job.impl.TaskAttemptImpl: attempt_1524681227186_277084_m_000140_0 TaskAttempt Transitioned from SUCCEEDED to KILLED
./container_1524681227186_277084_01_000001/syslog:2018-10-12 11:39:05,011 INFO [AsyncDispatcher event handler] org.apache.hadoop.mapreduce.v2.app.job.impl.TaskImpl: task_1524681227186_277084_m_000140 Task Transitioned from SUCCEEDED to SCHEDULED
./container_1524681227186_277084_01_000001/syslog:2018-10-12 11:39:05,055 INFO [AsyncDispatcher event handler] org.apache.hadoop.mapreduce.v2.app.job.impl.TaskAttemptImpl: attempt_1524681227186_277084_m_000140_1 TaskAttempt Transitioned from NEW to UNASSIGNED
./container_1524681227186_277084_01_000001/syslog:2018-10-12 11:39:07,015 INFO [RMCommunicator Allocator] org.apache.hadoop.mapreduce.v2.app.rm.RMContainerAllocator: Assigned container container_1524681227186_277084_01_098547 to attempt_1524681227186_277084_m_000140_1
./container_1524681227186_277084_01_000001/syslog:2018-10-12 11:39:07,015 INFO [AsyncDispatcher event handler] org.apache.hadoop.mapreduce.v2.app.job.impl.TaskAttemptImpl: attempt_1524681227186_277084_m_000140_1 TaskAttempt Transitioned from UNASSIGNED to ASSIGNED
./container_1524681227186_277084_01_000001/syslog:2018-10-12 11:39:07,018 INFO [ContainerLauncher #186] org.apache.hadoop.mapreduce.v2.app.launcher.ContainerLauncherImpl: Processing the event EventType: CONTAINER_REMOTE_LAUNCH for container container_1524681227186_277084_01_098547 taskAttempt attempt_1524681227186_277084_m_000140_1
./container_1524681227186_277084_01_000001/syslog:2018-10-12 11:39:07,018 INFO [ContainerLauncher #186] org.apache.hadoop.mapreduce.v2.app.launcher.ContainerLauncherImpl: Launching attempt_1524681227186_277084_m_000140_1

Answer 2

这个想法本身是可以的，但是如果您在用户调整桌面浏览器的大小并依赖大加载的图片时阻止获取较小的图片，则更好。您可以通过以下代码强制html使用精确的宽度进行渲染：

//detect window size and if it is greater than X e.g. 1200 then:
document.querySelector("meta[name=viewport]").setAttribute('content', width=1200);

根据视口不同的图像尺寸

2 个答案: