首页 \ 问答 \ 使用javascript为用户延迟加载内容的更好方法是什么?(What is a better way to lazy load content for users with javascript?)

使用javascript为用户延迟加载内容的更好方法是什么?(What is a better way to lazy load content for users with javascript?)

我有一个页面,有很多图像和其他代码,如果它是延迟加载将更好。

我一直试图用noscript标签做这个,但我只是注意到它在IE中无法正常工作。 它适用于我测试过的所有其他浏览器(ff,opera,chrome,safari等),所以我有点沮丧。

我很确定在某个时刻我实际上已经在IE中工作了,因为我已经使用了一段时间的技术并且我经常测试IE ...但它现在不能正常工作而且我谷歌的一切似乎都在建议它永远不会奏效。

这是一个复制和粘贴的简单示例,显示了我正在尝试的内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>lazy load with noscript</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
 </head>
 <body>

  <noscript>
   <div>
    <p>other content here</p>
    <img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" />
   </div>
  </noscript>

  <noscript>
   <div>
    <p>other content here 2</p>
    <img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" />
   </div>
  </noscript>

  <script type="text/javascript">
   var html = $("noscript:first").text();
   alert(html);
   $("body").append(html);
  </script>

 </body>
</html>

用于具有javascript且没有javascript的用户的html是相同的。 我只是使用jquery来标记内容以便于查看。 由于内容是在javascript中标记的,因此当选项卡打开时需要延迟加载,因此当页面具有相当大的附件时,最初下载不需要很长时间。

如何在不输出html的情况下实现这一目标?


I have a page that has lots of images and other code that would work better if it is lazy loaded.

I have been attempting to do this with the noscript tag but I just noticed that it is not working correctly in IE. It works in every other browser I tested (ff,opera,chrome,safari,etc) so I am a little frustrated.

I am pretty sure at one point or another I actually had this working in IE because I have been using the technique for a little while and I test IE quite frequently... but it isn't working now and everything I google seems to suggest that it never worked.

Here is a simple example to copy and paste that shows what I was attempting:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>lazy load with noscript</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
 </head>
 <body>

  <noscript>
   <div>
    <p>other content here</p>
    <img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" />
   </div>
  </noscript>

  <noscript>
   <div>
    <p>other content here 2</p>
    <img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" />
   </div>
  </noscript>

  <script type="text/javascript">
   var html = $("noscript:first").text();
   alert(html);
   $("body").append(html);
  </script>

 </body>
</html>

The html used for users with javascript and without javascript is the same. I just use jquery to tab the content to make it easier to view. Since the content is tabbed in javascript it needs to lazy load when a tab opens so it does not take ages to download initially when the page has sizable attachments.

How can I achieve this without outputting the html more than once?


原文:https://stackoverflow.com/questions/4786985
更新时间:2019-10-16 04:38

最满意答案

您需要做的是让所有图像都指向像素gif(或png)。 编写一个脚本,检查用户是否在图像附近滚动,然后使用Javascript将像素与完整图像交换。

在我编写的脚本中,您将拥有一个如下所示的图像标记:

<img src="pixel.gif" data-img="path-to-full-img.jpg" />

或者,您可以使用这样的插件 。 注意:我之前没有使用过这个插件,但它看起来就像你需要的一样。

如果你真的想要获得硬核,你可以使用像h ead.jscontrol.js之类的东西来加载你的javascript


What you need to do is have all the images point to a pixel gif (or png). Write a script that checks if a user has scrolled near an image, and then use Javascript to swap the pixel with the full image.

In scripts I have written, you would have an image tag that looks like:

<img src="pixel.gif" data-img="path-to-full-img.jpg" />

Alternately, you could use a plugin like this. Note: I have not used this plugin before, but it looks like it's all you need.

If you really wanted to get hardcore, you could lazyload your javascript using something like head.js or control.js

2011-01-24

相关问答

更多

JScrollBar以编程方式(JScrollBar programmatically)

您可以使用JScrollBar的setValue方法来设置滚动条的位置。 或者,您可以使用JScrollBar后面的Model方法; 例如: bar.getModel().setValue(position) 。 您可以使用JScrollBar(或模型)的getMinimum和getmaximum方法来检查setValue的有效值。 Javadoc应该提供更多帮助: JScrollBar you can use the setValue method of the JScrollBar to s

bootstrap模态检测当模态内容是链接href时按下哪个按钮(bootstrap modal detecting which button is pressed when the modal content is a link href)

模式中的按钮完全属于您(它们不会在脚本中生成,所以您可以随意使用它们)。 所以,对于取消按钮,您可以保留data-dismiss="modal" 。 保存按钮可以调用您的代码,完成后调用hide方法。 例: $('#confirm-save-button').on('click', function() { alert('Saved!!'); $('#myModal').modal('hide'); }); <script src="https://ajax.googleapis.

JSON编码将数组乘以单个数组(JSON encode multiplies arrays as single array)

如果你通过所有四个函数获得数组返回而不是使用array_merge as, $array = array_merge($this->_order->revenue_seller($value,$from,$to), $this->_order-refund_seller($value,$from,$to), $this->_order->customers_seller($value,$from,$to),

TypeError:抓取时,'NoneType'对象不可调用(TypeError: 'NoneType' object is not callable when scraping)

第一个问题来自: TableLeague("tr")[2:] TableLeague在这里是None ,因为没有包含trow8类的table元素。 而是使用id属性来查找所需的表元素: TableLeague = soup.find("table", {"id": "btable"}) 另外,你可能在这里意味着strip()而不是stip() : col[1].a.string.stip() 。 并且,为了关闭文件,请调用close()方法。 更换: FLeague.close FData.

如何用python中的Word docx等效替换latex bold命令?(How to replace latex bold command with Word docx equivalent in python?)

我想出了如何用re.split解决我的问题。 这仅在latex命令不是字符串的第一部分时才有效,对于我的情况应始终如此。 但是,这不是最通用的解决方案。 from docxtpl import DocxTemplate, RichText import re tpl=DocxTemplate('test_tpl.docx') startsentence = 'Here is a sentence with \textbf{bold words} in the middle of it and

Angular - 实现不同的界面语言(Angular - implementing different interface languages)

你正在尝试的是一些手动代码,为你处理翻译。 首先,您不需要$rootScope 。 $rootScope在极少数情况下是必需的,因为$scope ( $rootScope的子节点)可以被注入任何地方。 其次,Pascal Precht的Angular模块angular-translate解决了Angular中的所有翻译内容。 这是Angular刚刚成为普通人时创建的非常成熟的模块。 本章描述了这个特殊问题: https : //angular-translate.github.io/docs/#

为什么反应表是空的?(Why reactive-table is empty?)

我已将数组传递给表,一切正常 Template.devices.helpers({ Devices : function(){ return Devices.find().fetch(); } }); I've passed array to table and all works fine Template.devices.helpers({ Devices : function(){ return Devices.find().fetch

在Windows服务中查找堆栈溢出异常(Finding stack overflow exceptions in a windows service)

下载调试诊断工具 ,将其指向您的服务并在例外列表中添加堆栈溢出并让它运行。 当服务失败时,它将转储内存。 在Visual Studio中打开转储并检查所有线程上的所有堆栈以识别令人反感的代码。 您可能需要服务的原始调试符号才能获得可理解的信息。 有关内存转储的更多信息,请参见VS2010。 关于调试这类问题的更多信息与Tess Ferrandez一起观看此事 更新:有关详细信息的堆栈溢出异常的教程 。 它基于IIS中的Web应用程序,但您可以轻松地将相同的技术应用于服务,这就是您采用不同内存转储

相关文章

更多

最新问答

更多
  • 如何在给出字符串的开始和结束部分时使用正则表达式提取字符串的一部分(How to extract a part of a string using regex, when starting and ending portion of the string is given)
  • 使用从下拉列表派生的变量作为select语句中的列名... Access DB(Using a variable derived from a drop-down list as the column name in a select statement … Access DB)
  • 禁用付款选项 - 仅限特定产品 - magento的货到付款(Disable payment options-only cash on delivery for particular product-magento)
  • Python:Spyder在未停靠的编辑器窗口和spyder控制台之间切换(Python: Spyder switching between undocked editor window and spyder console)
  • 使用proxy_pass会影响letsencrypt的安装吗?(Will using proxy_pass affect letsencrypt installation?)
  • 即使confirm()方法为false,jquery AJAX也会提交表单(Jquery AJAX submits the form even if confirm() method is false)
  • 我可以使用带有params关键字的lambda表达式吗?(Can I use a lambda expression with params keyword?)
  • 以编程方式在swift中格式化字符串(Programmatically formatting string in swift)
  • 如何根据现有因素在新列中添加因子(How to add a factor in a new column according to the existing factors)
  • android快速加载来自网址的图片(android fast load image from url)
  • yii CHtml ::按钮和POST请求到控制器(yii CHtml::button and POST request to controller)
  • 无法更改工具栏的颜色(Can't change the color of toolbar)
  • android ListIterator,类转换bug?(android ListIterator, class casting bug? please check my log)
  • 当我使用函数创建属性时,如何向R data.frame添加属性?(How do I add an attribute to an R data.frame while I'm making it with a function?)
  • 如何将我的数据存储到Activity类中的一个对象中,并将该对象发送到另一个Activity类(How to store my data into one object in my Activity class and send that object to another Activity class)
  • 无法在wamp服务器上的joomla安装中配置数据库(Unable to configure database in joomla installation on wamp server)
  • 捕获所有重复的组(Capture all repeated groups)
  • 为宏提供状态更新,直到完成后进入无响应状态(Providing status updates for macro that goes into not responding state until completion)
  • 如何让PDO Fetch()以字符串形式返回(How to get a PDO Fetch( ) to return as string)
  • 无法访问SDK工具来安装NDK(Can't access SDK Tools to install NDK)
  • 获取CGPoint与应用程序窗口进行比较(Get CGPoint in comparison to app Window)
  • 如何在css中对齐图像和文本?(How to align images and text in css?)
  • BinaryWriter将脏字符放在AppendMode的开头写入[重复](BinaryWriter puts dirty chars at the begin writing in AppendMode [duplicate])
  • Jquery垂直内容滚动条(Jquery Vertical content scroller)
  • 是否有可能在android studio中更改.so文件代码并进行构建?(Is it possible to change the .so file code in android studio itself and make a build?)
  • prolog避免重复谓词(prolog avoiding duplicate predicates)
  • 在Swift中使用AlamoFire创建通用方法(Creating a generic method with AlamoFire in Swift)
  • 如何获得给定的JSON值?(how to get given JSON value?)
  • 访问当前对象的类(Access class of current object)
  • 如何延迟jQuery中的文本功能(How to delay the text function in jQuery)