1. IronPDF
  2. How-Tos
  3. Use WaitFor to Delay PDF Render

How to Use the WaitFor Class to Delay C# PDF Rendering

Chaknith Bin
Chaknith Bin
Updated:

This is a heading

When rendering PDF documents, a common issue arises where the rendering process occurs before all the necessary assets and animations of JavaScript have finished loading. This can result in incomplete or incorrect rendering of the PDF document. Initially, we addressed this issue by allowing the user to set an arbitrary delay as a solution. However, relying on an arbitrary delay is not a reliable or efficient approach.

To provide a more robust solution, we have implemented a WaitFor class that enhances the PDF rendering process. The WaitFor object from RenderOptions offers several options, including:

  • PageLoad: Default render with no waiting.
  • RenderDelay: Setting an arbitrary waiting time.
  • Fonts: Waits until all the fonts have loaded.
  • JavaScript: Triggering the render with a JavaScript function.
  • HTML elements: Waits for specific HTML elements, such as element IDs, names, tag names, and query selectors to target elements.
  • NetworkIdle: Waiting for network idle (0, 2, or a custom amount).

These features are available for converting HTML strings to PDF with IronPDF, HTML files to PDF with IronPDF, and web URLs to PDF with IronPDF. Let's explore the key aspects of this new feature.

How to Use WaitFor to Delay PDF Render in C#

  1. Download the C# IronPDF library to delay PDF rendering
  2. Generate a PDF document from an HTML string, file, or web URL
  3. Utilize the JavaScript method of WaitFor to trigger the render from a JavaScript function
  4. Delay the render based on the number of network activities
  5. Wait for specific HTML elements as well as for all the fonts to be loaded


Get started with IronPDF

Start using IronPDF in your project today with a free trial.

First Step:
green arrow pointer

Default Immediate Render Example

By default, the rendering process occurs immediately after the page has finished loading. The PageLoad method does not need to be called if you want to render normally.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-pageload.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render as soon as the page is loaded
renderer.RenderingOptions.WaitFor.PageLoad();

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Custom Render Delay Example

In situations where a specific delay is required before rendering the PDF, you can set an arbitrary number of milliseconds as a delay. This provides flexibility in accommodating any specific timing requirements.

This option works the same way as the old implementation using the RenderingOptions.RenderDelay property. However, the old property has been deprecated, and it is highly recommended to use the new API, RenderingOptions.WaitFor.RenderDelay.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-delay-time.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render after 3000ms
renderer.RenderingOptions.WaitFor.RenderDelay(3000);

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Render after 3000ms
renderer.RenderingOptions.WaitFor.RenderDelay(3000)

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>testing</h1>")
$vbLabelText   $csharpLabel

All Fonts Loaded Example

The AllFontsLoaded method in the WaitFor class allows the PDF rendering process to pause until all fonts are loaded from external sources like Google Fonts or other servers. This ensures that the final PDF includes all required fonts, preserving the document's intended typography and visual appearance.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-all-fonts.cs
using IronPdf;

string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Test Registration of Extension</title>
  <!-- for google web fonts -->
  <link rel=""preconnect"" href=""https://fonts.googleapis.com"">
  <link rel=""preconnect"" href=""https://fonts.gstatic.com"" crossorigin>
  <link rel=""stylesheet"" href=""https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"" >

  <style>
  /* for remote fonts */
  @font-face {
    font-family: 'CustomFont';
    src: url('https://stage.gradfinale.co.uk/tcpdf/fonts/avgr65wttf.ttf');
  }
  p#p1 { font-family: CustomFont, sans-serif; }

  /* for local fonts */
  @font-face {
    font-family: 'LocalCustomFont';
    src: local('Arial');
  }
  p#p3 { font-family: LocalCustomFont, sans-serif; }
  </style>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
<p style=""font-family: Roboto, monospace;"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
<p id=""p1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
<p id=""p3"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
</body>
</html>)";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.AllFontsLoaded(10000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
Imports IronPdf

Private htmlContent As String = "
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Test Registration of Extension</title>
  <!-- for google web fonts -->
  <link rel=""preconnect"" href=""https://fonts.googleapis.com"">
  <link rel=""preconnect"" href=""https://fonts.gstatic.com"" crossorigin>
  <link rel=""stylesheet"" href=""https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"" >

  <style>
  /* for remote fonts */
  @font-face {
    font-family: 'CustomFont';
    src: url('https://stage.gradfinale.co.uk/tcpdf/fonts/avgr65wttf.ttf');
  }
  p#p1 { font-family: CustomFont, sans-serif; }

  /* for local fonts */
  @font-face {
    font-family: 'LocalCustomFont';
    src: local('Arial');
  }
  p#p3 { font-family: LocalCustomFont, sans-serif; }
  </style>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
<p style=""font-family: Roboto, monospace;"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
<p id=""p1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
<p id=""p3"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ligula venenatis erat <strong>scelerisque</strong> auctor.</p>
</body>
</html>)"

Private renderer As New ChromePdfRenderer()
renderer.RenderingOptions.WaitFor.AllFontsLoaded(10000)

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
$vbLabelText   $csharpLabel

Custom JavaScript Execution Example

For more control over the rendering process, our feature allows you to specify a custom JavaScript function that needs to be executed before rendering the PDF document. This enables you to perform any necessary tasks or checks before initiating the rendering process. This gives the user control over when to trigger the render.

In JavaScript, the function window.ironpdf.notifyRender() is used to trigger the rendering task. Once notifyRender() is invoked, the rendering process will start. You have full control over when to invoke the function.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-javascript.cs
using IronPdf;

string html = @"<!DOCTYPE html>
<html>
<body>
<h1>Testing</h1>
<script type='text/javascript'>

// Set delay
setTimeout(function() {
    window.ironpdf.notifyRender();
}, 1000);

</script>
</body>
</html>";

ChromePdfRenderOptions renderingOptions = new ChromePdfRenderOptions();

// Set rendering to wait for the notifyRender function
renderingOptions.WaitFor.JavaScript(5000);

PdfDocument pdf = ChromePdfRenderer.StaticRenderHtmlAsPdf(html, renderingOptions);
JAVASCRIPT

HTML Elements Example

With this option, the rendering process can be set to wait for specific HTML elements, such as element IDs, names, tag names, and even using query selectors to target elements.

Wait for Element ID

In the code example below, the rendering will wait for a specific element ID.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-id.cs
using IronPdf;

string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Delayed render tests</title>
  <script type=""text/javascript"">
setTimeout(function() {
var h1Tag = document.createElement(""h1"");
h1Tag.innerHTML = ""bla bla bla"";
h1Tag.setAttribute(""id"", ""myid"");

        var block = document.querySelector(""div#x"");
block.appendChild(h1Tag);
}, 1000);
  </script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlElementById("myid", 5000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
Imports IronPdf

Private htmlContent As String = "
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Delayed render tests</title>
  <script type=""text/javascript"">
setTimeout(function() {
var h1Tag = document.createElement(""h1"");
h1Tag.innerHTML = ""bla bla bla"";
h1Tag.setAttribute(""id"", ""myid"");

        var block = document.querySelector(""div#x"");
block.appendChild(h1Tag);
}, 1000);
  </script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>"

Private renderer As New ChromePdfRenderer()
renderer.RenderingOptions.WaitFor.HtmlElementById("myid", 5000)

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
$vbLabelText   $csharpLabel

Wait for Element Name

In the code example below, the rendering process will wait for a specific element Name.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-name.cs
using IronPdf;

string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Delayed render tests</title>
  <script type=""text/javascript"">
setTimeout(function() {
var h1Tag = document.createElement(""h1"");
h1Tag.innerHTML = ""bla bla bla"";
h1Tag.setAttribute(""name"", ""myName"");

        var block = document.querySelector(""div#x"");
block.appendChild(h1Tag);
}, 1000);
  </script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlElementByName("myName", 5000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
Imports IronPdf

Private htmlContent As String = "
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Delayed render tests</title>
  <script type=""text/javascript"">
setTimeout(function() {
var h1Tag = document.createElement(""h1"");
h1Tag.innerHTML = ""bla bla bla"";
h1Tag.setAttribute(""name"", ""myName"");

        var block = document.querySelector(""div#x"");
block.appendChild(h1Tag);
}, 1000);
  </script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>"

Private renderer As New ChromePdfRenderer()
renderer.RenderingOptions.WaitFor.HtmlElementByName("myName", 5000)

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
$vbLabelText   $csharpLabel

Wait for Element Tag Name

In the code example below, the rendering process will wait for a specific element tag name.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-tag-name.cs
using IronPdf;

string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Delayed render tests</title>
  <script type=""text/javascript"">
setTimeout(function() {
var newElem = document.createElement(""h2"");
newElem.innerHTML = ""bla bla bla"";

        var block = document.querySelector(""div#x"");
block.appendChild(newElem);
}, 1000);
  </script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlElementByTagName("h2", 5000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
Imports IronPdf

Private htmlContent As String = "
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Delayed render tests</title>
  <script type=""text/javascript"">
setTimeout(function() {
var newElem = document.createElement(""h2"");
newElem.innerHTML = ""bla bla bla"";

        var block = document.querySelector(""div#x"");
block.appendChild(newElem);
}, 1000);
  </script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>"

Private renderer As New ChromePdfRenderer()
renderer.RenderingOptions.WaitFor.HtmlElementByTagName("h2", 5000)

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
$vbLabelText   $csharpLabel

Use Query Selector

In the code example below, the rendering process will wait for the element selected by the query selector. The HtmlQuerySelector method will wait for an img tag with an id of 'myid' and a class of 'blablastyle'.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-html-element-query-selector.cs
using IronPdf;

string htmlContent = @"
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Test Registration of Extension</title>
  <script type=""text/javascript"">
setTimeout(function() {
var img = document.createElement(""img"");
img.onload = function() {
img.setAttribute(""id"", ""myid"");
img.setAttribute(""class"", ""blablastyle"");
var block = document.getElementById(""x"");
block.appendChild(img);
};
img.src = ""https://www.w3schools.com/images/picture.jpg"";// .src after .onload to ignore cached, if any
}, 1000);
  </script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("img#myid.blablastyle", 5000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlContent);
Imports IronPdf

Private htmlContent As String = "
<!DOCTYPE html>
<html lang=""en"">
<head>
  <meta charset=""UTF-8"">
  <title>Test Registration of Extension</title>
  <script type=""text/javascript"">
setTimeout(function() {
var img = document.createElement(""img"");
img.onload = function() {
img.setAttribute(""id"", ""myid"");
img.setAttribute(""class"", ""blablastyle"");
var block = document.getElementById(""x"");
block.appendChild(img);
};
img.src = ""https://www.w3schools.com/images/picture.jpg"";// .src after .onload to ignore cached, if any
}, 1000);
  </script>
</head>
<body>
<h1>This is Delayed Render Test!</h1>
    <div id=""x""></div>
</body>
</html>"

Private renderer As New ChromePdfRenderer()
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("img#myid.blablastyle", 5000)

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
$vbLabelText   $csharpLabel

Network Idle Example

No Network Activity

This type of network idle allows you to wait until there is no network activity, which typically indicates that the content has been fully loaded. This is suitable for a Single-Page Application (SPA) or a simple web page that doesn't have any long-polling network requests or ongoing network activity.

The rendering process will only commence once there has been no ongoing network activity for at least 500ms.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-network-idle-0.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render unless there has been no network activity for at least 500ms
renderer.RenderingOptions.WaitFor.NetworkIdle0();

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Two Network Activities Allowed

The NetworkIdle2 method is suitable for web applications or web pages that have long-polling network requests or heartbeat pings. Typically, there are 1-2 requests involved. In this case, even if these requests are ongoing, they won't be considered to invalidate the triggering of the network idle event, as it is acceptable to have at most two of them.

Before initiating the rendering process, there should be at most two network activities remaining for at least 500ms. This option provides a quick configuration for handling a fixed number of network activities.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-network-idle-2.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render unless there are at most 2 network activities for at least 500ms
renderer.RenderingOptions.WaitFor.NetworkIdle2();

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Customize Network Activity Allowance

In cases where multiple network requests are involved, you have the flexibility to customize both the network idle duration and the number of allowed network requests that don't invalidate the triggering of the network idle event. This option is suitable for web applications or web pages with specific requirements that don't fit the previous two methods. By providing this customization, we ensure that we address a wide range of use cases under different circumstances.

:path=/static-assets/pdf/content-code-examples/how-to/waitfor-customize-network.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render unless there are at most 5 network activities for at least 1000ms
renderer.RenderingOptions.WaitFor.NetworkIdle(1000, 5);

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>testing</h1>");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Render unless there are at most 5 network activities for at least 1000ms
renderer.RenderingOptions.WaitFor.NetworkIdle(1000, 5)

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>testing</h1>")
$vbLabelText   $csharpLabel

Set Maximum Waiting Time

In addition, the JavaScript, NetworkIdle, NetworkIdle0, and NetworkIdle2 methods also allow you to set a maximum waiting time to ensure that the wait will not be indefinite. The maxWaitTime parameter of these methods can be used for this purpose.

Please noteAll specified time values are considered to be in milliseconds.

Ready to see what else you can do? Check out our tutorial page here: Addtional Features

Frequently Asked Questions

What is the WaitFor class in a PDF rendering library?

The WaitFor class in IronPDF is used to manage the timing of asynchronous operations during PDF rendering, ensuring all necessary assets and JavaScript animations are loaded before rendering the document.

How can I delay PDF rendering until all page assets are loaded?

In IronPDF, you can use the WaitFor class options like PageLoad, RenderDelay, or AllFontsLoaded to ensure that all necessary page assets are loaded before rendering the PDF document.

What options are available in the WaitFor class for managing rendering delays?

IronPDF's WaitFor class includes options such as PageLoad, RenderDelay, Fonts, JavaScript, HTML elements, and NetworkIdle, each allowing you to wait for specific conditions before rendering the PDF.

How does the PageLoad option in the WaitFor class affect PDF rendering?

The PageLoad option in IronPDF's WaitFor class allows the PDF to render immediately after the page has finished loading, without any additional waiting.

How can I set a specific delay time before rendering a PDF?

With IronPDF, you can use the RenderDelay option in the WaitFor class to specify an arbitrary number of milliseconds to delay rendering, accommodating specific timing needs.

What is the role of the AllFontsLoaded method in PDF rendering?

The AllFontsLoaded method in IronPDF ensures that the PDF rendering process pauses until all fonts from external sources are fully loaded, guaranteeing the final PDF includes all required fonts.

Can JavaScript be used to control PDF rendering timing?

Yes, in IronPDF, you can use a custom JavaScript function within the WaitFor class to control when the PDF rendering process is triggered.

What does the NetworkIdle option do in the WaitFor class?

The NetworkIdle option in IronPDF's WaitFor class delays PDF rendering until a specified level of network activity has ceased, ensuring all content is fully loaded.

Is it possible to customize network activity settings in PDF rendering?

IronPDF allows you to customize network activity settings in the WaitFor class, including the network idle duration and the number of allowed network requests during rendering.

How do I prevent indefinite waiting during PDF rendering?

You can set a maximum waiting time in IronPDF's WaitFor class using the maxWaitTime parameter with methods like JavaScript, NetworkIdle, NetworkIdle0, and NetworkIdle2.

Chaknith Bin
Chaknith Bin
  Chat with engineering team now
Software Engineer
Chaknith works on IronXL and IronBarcode. He has deep expertise in C# and .NET, helping improve the software and support customers. His insights from user interactions contribute to better products, documentation, and overall experience.
Talk to an Expert Five Star Trust Score Rating

Ready to Get Started?

Nuget Passed
Free NuGet Download Total downloads: 15,030,178
View Licenses