使用 jQuery 将图像淡入网站答案

【问题标题】：Fade image into website using jQuery使用 jQuery 将图像淡入网站
【发布时间】：2014-03-11 15:04:08
【问题描述】：

我想让图像立即出现在屏幕上，然后淡出并显示网页，使其看起来淡入网页。出于某种原因，我得到了奇怪的结果，我不是 jQuery 专家，但我觉得我可能接近我想要的。这是fiddle

$(".splash").delay(2000).fadeOut(2000, function() {
    $( "#result" ).load( "http://google.com" ).fadeIn(2000);
});

基本上它应该显示猫 2 秒钟，然后淡入 Google 网站。

【问题讨论】：

'google.com' 不允许您“加载”其内容 (ajax) 以呈现为您自己的内容。
您不能使用.load() 进行跨域请求。顺便说一句，看起来你应该使用 load() 回调到 fadeIn() 元素。所以你真的针对google.com，如果是的话，即使这个网站也无法在iframe中显示，所以......
来自 jQuery 文档：“由于浏览器安全限制，大多数“Ajax”请求都受制于同源策略；请求无法成功从不同的域、子域、端口或协议。”
jsfiddle.net/Uj9hZ/3 - 显示您的逻辑没有问题
@RobSedgwick 但load() 是异步的

标签： javascript jquery

【解决方案1】：

您可以像这样执行 iFrame 或对象标记：

$(".splash").delay(2000).fadeOut(2000, function() {
    $( "#result" ).html('<object data="http://tired.com/">').fadeIn(2000);
});

结果： http://jsfiddle.net/G2RhJ/3/

【讨论】：

【解决方案2】：

由于 JavaScript 的 同源策略，您无法使用 .load 加载外部 URL。欲了解更多详情，请查看this 链接。
对于您的代码，如果您尝试使用某些本地 url，这应该可以工作。

$(".splash").fadeOut(2000, function() { $( "#result" ).load("/localpage.html" ); });

【讨论】：

【解决方案3】：

我认为你不能使用 div 标签来显示另一个网站，即使使用 jQuery 也不行 ;-)

另外一点是 load() 函数仅适用于本地 URL，例如“dir/script.php”。

据我所知，完成任务的唯一方法是使用框架/iframe。它已经在这里完成了： How do I load an url in iframe with Jquery

也许这对你有用（未经测试）：

<div id="imageContainer">
<img class="splash" src="http://placekitten.com/1920/1080">
</div>
<div id="mydiv"><iframe id="frame" src="" width="100%" height="300">
</iframe></div>

$(".splash").delay(2000).fadeOut(2000, function() {
$("#frame").attr("src", "http://www.google.com").fadeIn(2000);
});

【讨论】：